mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-15 09:21:24 +08:00
83 lines
4.6 KiB
C#
83 lines
4.6 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
|
|
<CascadingValue Value="this">
|
|
<CascadingValue Value="true" Name="IsEmpty" IsFixed="true">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
<div class="@ClassMapper.Class" style="@Style" id="@Id">
|
|
<!--Tab bar-->
|
|
<div role="tablist" class="ant-tabs-nav">
|
|
<div class="ant-tabs-nav-wrap @_tabsNavWarpPingClass" @ref="@_tabBars">
|
|
<div class="ant-tabs-nav-list" style="@_navStyle" @ref="@_scrollTabBar">
|
|
<CascadingValue Value="true" Name="IsTab" IsFixed="true">
|
|
@foreach (var pane in _panes)
|
|
{
|
|
<CascadingValue Value="pane" Name="Pane" @key="pane.Key">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
}
|
|
</CascadingValue>
|
|
@if (Type == TabType.EditableCard && !HideAdd)
|
|
{
|
|
<button type="button" class="ant-tabs-nav-add" aria-label="Add tab" @onclick="OnAddClick">
|
|
<span role="img" aria-label="plus" class="anticon anticon-plus">
|
|
<svg viewBox="64 64 896 896" focusable="false" class="" data-icon="plus" width="1em" height="1em" fill="currentColor" aria-hidden="true">
|
|
<defs><style></style></defs>
|
|
<path d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"></path>
|
|
<path d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z">
|
|
</path>
|
|
</svg>
|
|
</span>
|
|
</button>
|
|
}
|
|
<div class="ant-tabs-ink-bar ant-tabs-ink-bar-animated" style="@_inkStyle"></div>
|
|
</div>
|
|
</div>
|
|
@if (TabBarExtraContent != null || (Card?.Extra != null && Card?.Title == null && Card?.TitleTemplate == null))
|
|
{
|
|
<div class="ant-tabs-extra-content">
|
|
@(TabBarExtraContent?? Card?.Extra)
|
|
</div>
|
|
}
|
|
<Dropdown>
|
|
<Overlay>
|
|
<ul tabindex="0" class="ant-tabs-dropdown-menu ant-tabs-dropdown-menu-root ant-tabs-dropdown-menu-vertical" id="@($"rc-tabs-{Id}-more-popup")" role="listbox" aria-label="expanded dropdown">
|
|
@foreach (var pane in _panes.Where(p => !p.IsActive))
|
|
{
|
|
<li class="ant-tabs-dropdown-menu-item @(pane.Disabled?$"ant-tabs-dropdown-menu-item-disabled":string.Empty)" id="@($"rc-tabs-{Id}-more-popup-{pane.Key}")" role="option" aria-disabled="false" aria-selected="false" aria-controls="@($"rc-tabs-{Id}-more-popup-{pane.Key}")"
|
|
@onclick="(e)=>HandleTabClick(pane,e)">@pane.Tab</li>
|
|
}
|
|
</ul>
|
|
</Overlay>
|
|
<ChildContent>
|
|
<div class="@_operationClass" @onclick:preventDefault>
|
|
<button tabindex="-1" class="ant-tabs-nav-more" id="rc-tabs-0-more" aria-expanded="false" aria-haspopup="listbox" aria-hidden="true" aria-controls="rc-tabs-0-more-popup"
|
|
style="@_operationStyle" type="button">
|
|
<span class="anticon anticon-ellipsis" role="img" aria-label="ellipsis">
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="" aria-hidden="true" fill="currentColor" viewBox="64 64 896 896" focusable="false" width="1em" height="1em" data-icon="ellipsis"><path d="M 176 511 a 56 56 0 1 0 112 0 a 56 56 0 1 0 -112 0 Z m 280 0 a 56 56 0 1 0 112 0 a 56 56 0 1 0 -112 0 Z m 280 0 a 56 56 0 1 0 112 0 a 56 56 0 1 0 -112 0 Z" /></svg>
|
|
</span>
|
|
</button>
|
|
</div>
|
|
</ChildContent>
|
|
</Dropdown>
|
|
</div>
|
|
<!--Tab content-->
|
|
@if (Card == null)
|
|
{
|
|
<div class="ant-tabs-content-holder ">
|
|
<div class="ant-tabs-content ant-tabs-content-@TabPosition">
|
|
<CascadingValue Value="true" Name="IsPane" IsFixed="true">
|
|
@foreach (var pane in _panes)
|
|
{
|
|
<CascadingValue Value="pane" Name="Pane">
|
|
@ChildContent
|
|
</CascadingValue>
|
|
}
|
|
</CascadingValue>
|
|
</div>
|
|
</div>
|
|
}
|
|
</div>
|
|
</CascadingValue>
|