ant-design-blazor/components/tabs/Tabs.razor

@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>