@page "/components/tab"
<PageLayout Title="Tab 选项卡" Description="用于承载同一层级下不同页面或类别的组件，方便用户在同一个页面框架下进行快速切换。"
    Anchors="@(new[]{"基础选项卡","带图标的选项卡","不同尺寸的选项卡","卡片选项卡","禁用选项卡"})">
    <ChildContent>


<Example Title="基础选项卡" RunStyle="@Code.BgRun">
    <Description>使用选项卡切换内容模块，操作后不会进行页面跳转。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>
<Example Title="带图标的选项卡" RunStyle="@Code.BgRun">
    <Description>在基础选项卡基础上，在每个标签前添加图标，方便用户快速理解。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="首页" Icon="IconName.Home">首页的内容</TTabItem>
            <TTabItem Title="日程" Icon="IconName.Calendar">日程的内容</TTabItem>
            <TTabItem Title="事项" Icon="IconName.ViewList">事项的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>

<Example Title="不同尺寸的选项卡" RunStyle="@Code.BgRun">
    <Description>提供 大、中（默认）两种尺寸。</Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>

        <TTab Size="TabSize.Large">
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>

<TTab Size=""TabSize.Large"">
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>
<Example Title="卡片选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <TTab TCard>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab TCard>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
")
    </CodeContent>
</Example>

<Example Title="禁用选项卡" RunStyle="@Code.BgRun">
    <Description></Description>
    <RunContent>
        <TTab>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Disabled Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>

        <TTab TCard>
            <TTabItem Title="选项卡1">选项卡1的内容</TTabItem>
            <TTabItem Disabled Title="选项卡2">选项卡2的内容</TTabItem>
            <TTabItem Title="选项卡3">选项卡3的内容</TTabItem>
        </TTab>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TTab>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Disabled Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>


<TTab TCard>
    <TTabItem Title=""选项卡1"">选项卡1的内容</TTabItem>
    <TTabItem Disabled Title=""选项卡2"">选项卡2的内容</TTabItem>
    <TTabItem Title=""选项卡3"">选项卡3的内容</TTabItem>
</TTab>
```
        ")
    </CodeContent>
        </Example>
    </ChildContent>
    <ApiContent>
        <ApiDocument ComponentType="typeof(TTab)"/>
        <ApiDocument ComponentType="typeof(TTabItem)" />
    </ApiContent>
</PageLayout>