Blazor 自定义可重用基础组件之 Tab

落单枫叶

已于 2023-07-21 00:38:55 修改

阅读量256

点赞数

分类专栏： Blazor C# 文章标签： blazor c# 自定义可重用基础组件 Tab

于 2023-07-19 17:54:08 首次发布

本文链接：https://blog.csdn.net/luwq168/article/details/131814763

版权

C# 同时被 2 个专栏收录

61 篇文章 0 订阅

订阅专栏

Blazor

19 篇文章 1 订阅

订阅专栏

Tab 组件可能很少用，这里只是为简化代码，故可能比较难看，但能用。TabItem也有限制为5个，如果超过则再自行增加。

<div class="tab">
    <div class="nav-tabs bg-light">
        <ul class="nav">
            @if (Titles.Length > 0)
            {
                <li class="nav-item">
                    <a class="nav-link @activeTab1" @onclick="()=>openTab(1)">@Titles[0]</a>
                </li>
            }
            @if (Titles.Length > 1)
            {
                <li class="nav-item">
                    <a class="nav-link @activeTab2" @onclick="()=>openTab(2)">@Titles[1]</a>
                </li>
            }
            @if (Titles.Length > 2)
            {
                <li class="nav-item">
                    <a class="nav-link @activeTab3" @onclick="()=>openTab(3)">@Titles[2]</a>
                </li>
            }
            @if (Titles.Length > 3)
            {
                <li class="nav-item">
                    <a class="nav-link @activeTab4" @onclick="()=>openTab(4)">@Titles[3]</a>
                </li>
            }
            @if (Titles.Length > 4)
            {
                <li class="nav-item">
                    <a class="nav-link @activeTab5" @onclick="()=>openTab(5)">@Titles[4]</a>
                </li>
            }
        </ul>
    </div>
    <div class="tab-content">
        <div id="tab1" class="tab-pane @activeTab1">
            @TabItem1
        </div>
        <div id="tab2" class="tab-pane @activeTab2">
            @TabItem2
        </div>
        <div id="tab3" class="tab-pane @activeTab3">
            @TabItem3
        </div>
        <div id="tab4" class="tab-pane @activeTab4">
            @TabItem4
        </div>
        <div id="tab5" class="tab-pane @activeTab5">
            @TabItem5
        </div>
    </div>
</div>

@code {
    private string activeTab1 = "active";
    private string activeTab2 = "";
    private string activeTab3 = "";
    private string activeTab4 = "";
    private string activeTab5 = "";
    private void openTab(int tab)
    {
        switch (tab)
        {
            case 2:
                activeTab2 = "active";
                activeTab1 = "";
                activeTab3 = "";
                activeTab4 = "";
                activeTab5 = "";
                break;
            case 3:
                activeTab3 = "active";
                activeTab1 = "";
                activeTab2 = "";
                activeTab4 = "";
                activeTab5 = "";
                break;
            case 4:
                activeTab4 = "active";
                activeTab1 = "";
                activeTab2 = "";
                activeTab3 = "";
                activeTab5 = "";
                break;
            case 5:
                activeTab5 = "active";
                activeTab1 = "";
                activeTab2 = "";
                activeTab3 = "";
                activeTab4 = "";
                break;
            default:
                activeTab1 = "active";
                activeTab2 = "";
                activeTab3 = "";
                activeTab4 = "";
                activeTab5 = "";
                break;
        };
    }
    [Parameter]
    public RenderFragment? TabItem1 { get; set; }
    [Parameter]
    public RenderFragment? TabItem2 { get; set; }
    [Parameter]
    public RenderFragment? TabItem3 { get; set; }
    [Parameter]
    public RenderFragment? TabItem4 { get; set; }
    [Parameter]
    public RenderFragment? TabItem5 { get; set; }
    [Parameter]
    public required string[] Titles { get; set; }
}

使用

<Tab Titles="@titles">
    <TabItem1>
        <p>这是第一个页签</p>
    </TabItem1>
    <TabItem2>
        <p>这是第二个页签</p>
    </TabItem2>
    <TabItem3>
        <p>这是第三个页签</p>
    </TabItem3>
</Tab>
@code {
    private string[] titles = new string[] { "页签一", "页签二", "页签三" };
}

效果：