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

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

    

        

            @if (Titles.Length > 0)
            {
                

                    @Titles[0]
                
            }
            @if (Titles.Length > 1)
            {
                

                    @Titles[1]
                
            }
            @if (Titles.Length > 2)
            {
                

                    @Titles[2]
                
            }
            @if (Titles.Length > 3)
            {
                

                    @Titles[3]
                
            }
            @if (Titles.Length > 4)
            {
                

                    @Titles[4]
                
            }
        
    
    

        

            @TabItem1
        
        

            @TabItem2
        
        

            @TabItem3
        
        

            @TabItem4
        
        

            @TabItem5
        
    


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

使用

    
        
这是第一个页签
    
    
        
这是第二个页签
    
    
        
这是第三个页签
    

@code {
    private string[] titles = new string[] { "页签一", "页签二", "页签三" };
}

效果：