mirror of
https://gitee.com/ant-design-blazor/ant-design-blazor.git
synced 2024-12-14 08:51:27 +08:00
a3602eea15
* feat(module: tabs): scroll over tab pane * feat(module: tabs): drop down hide visible tabs * clean up the code Co-authored-by: James Yeung <shunjiey@hotmail.com>
73 lines
3.6 KiB
C#
73 lines
3.6 KiB
C#
@namespace AntDesign
|
|
@inherits AntDomComponentBase
|
|
|
|
<CascadingValue Value="this" IsFixed="@true">
|
|
<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">
|
|
<Icon Type="plus" />
|
|
</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 GetInvisibleTabs())
|
|
{
|
|
<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)">@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">
|
|
<Icon Type="ellipsis" />
|
|
</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> |