标签栏 (Tabs)

用于分组显示不同内容。

概述

选项卡组件
支持左右上下4种布局，默认顶部

代码演示

1.顶部示例

Tab1
Tab2

Tab1 Content

namespace WebSite.Docus.Nav.Tabses;

class Tabs1 : BaseComponent
{
    private readonly List<MenuItem> tabItems = new()
    {
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab1" },
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab2" }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Tabs>()
               .Set(c => c.CurItem, tabItems[0])
               .Set(c => c.Items, tabItems)
               .Set(c => c.Body, (b, m) => b.Span($"{m.Name} Content"))
               .Build();
    }
}

2.底部示例

Tab1 Content

Tab1
Tab2

namespace WebSite.Docus.Nav.Tabses;

class Tabs2 : BaseComponent
{
    private readonly List<MenuItem> tabItems = new()
    {
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab1" },
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab2" }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Tabs>()
               .Set(c => c.Position, PositionType.Bottom)
               .Set(c => c.CurItem, tabItems[0])
               .Set(c => c.Items, tabItems)
               .Set(c => c.Body, (b, m) => b.Span($"{m.Name} Content"))
               .Build();
    }
}

3.左侧示例

Tab1
Tab2

Tab1 Content

namespace WebSite.Docus.Nav.Tabses;

class Tabs3 : BaseComponent
{
    private readonly List<MenuItem> tabItems = new()
    {
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab1" },
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab2" }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Tabs>()
               .Set(c => c.Position, PositionType.Left)
               .Set(c => c.CurItem, tabItems[0])
               .Set(c => c.Items, tabItems)
               .Set(c => c.Body, (b, m) => b.Span($"{m.Name} Content"))
               .Build();
    }
}

4.右侧示例

Tab1 Content

Tab1
Tab2

namespace WebSite.Docus.Nav.Tabses;

class Tabs4 : BaseComponent
{
    private readonly List<MenuItem> tabItems = new()
    {
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab1" },
        new MenuItem { Icon = "fa fa-file-o", Name = "Tab2" }
    };

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<Tabs>()
               .Set(c => c.Position, PositionType.Right)
               .Set(c => c.CurItem, tabItems[0])
               .Set(c => c.Items, tabItems)
               .Set(c => c.Body, (b, m) => b.Span($"{m.Name} Content"))
               .Build();
    }
}