@page "/components/step"
<PageLayout Title="Steps 步骤条" Description="提示用户进度以及当前的步骤，用于引导用户按照步骤完成任务的导航条。"
    Anchors="@(new[]{"带序号的水平步骤条","不带序的水平步骤条","垂直步骤条","自定义图标的步骤条","错误状态的步骤条","带额外内容的步骤条"})">
    <ChildContent>

<Example Title="带序号的水平步骤条">
    <Description>适用于步骤数较多时，让用户更明确的了解步骤数量。</Description>
    <RunContent>
        <TStepGroup>
            <TStepItem Status="StepStatus.Finish">已完成的步骤</TStepItem>
            <TStepItem Status="StepStatus.Process">进行中的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
        </TStepGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup>
    <TStepItem Status=""StepStatus.Finish"">已完成的步骤</TStepItem>
    <TStepItem Status=""StepStatus.Process"">进行中的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
</TStepGroup>
```
")
    </CodeContent>
</Example>

<Example Title="不带序的水平步骤条">
    <Description>适用于步骤数较少时，主要引导用户按步骤完成操作。</Description>
    <RunContent>
        <TStepGroup Dot>
            <TStepItem Status="StepStatus.Finish">已完成的步骤</TStepItem>
            <TStepItem Status="StepStatus.Process">进行中的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
        </TStepGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup Dot>
    <TStepItem Status=""StepStatus.Finish"">已完成的步骤</TStepItem>
    <TStepItem Status=""StepStatus.Process"">进行中的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
</TStepGroup>
```
")
    </CodeContent>
</Example>


<Example Title="垂直步骤条">
    <Description>设置 <code>Vertical</code> 即可垂直显示。</Description>
    <RunContent>
        <TSpace Gap="100px">
            <TSpaceItem>
                <TStepGroup Vertical>
                    <TStepItem Status="StepStatus.Finish">已完成的步骤</TStepItem>
                    <TStepItem Status="StepStatus.Process">进行中的步骤</TStepItem>
                    <TStepItem>未进行的步骤</TStepItem>
                    <TStepItem>未进行的步骤</TStepItem>
                </TStepGroup>
            </TSpaceItem>
            <TSpaceItem>
                <TStepGroup Vertical Dot>
                    <TStepItem Status="StepStatus.Finish">已完成的步骤</TStepItem>
                    <TStepItem Status="StepStatus.Process">进行中的步骤</TStepItem>
                    <TStepItem>未进行的步骤</TStepItem>
                    <TStepItem>未进行的步骤</TStepItem>
                </TStepGroup>
            </TSpaceItem>
        </TSpace>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup Vertical>
    <TStepItem Status=""StepStatus.Finish"">已完成的步骤</TStepItem>
    <TStepItem Status=""StepStatus.Process"">进行中的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
</TStepGroup>

<TStepGroup Vertical Dot>
    <TStepItem Status=""StepStatus.Finish"">已完成的步骤</TStepItem>
    <TStepItem Status=""StepStatus.Process"">进行中的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
    <TStepItem>未进行的步骤</TStepItem>
</TStepGroup>
```
")
    </CodeContent>
</Example>
<Example Title="自定义图标的步骤条">
    <Description>设置 <code>Icon</code> 图标名称即可。</Description>
    <RunContent>
        <TStepGroup>
            <TStepItem Icon="IconName.Login" Status="StepStatus.Finish">登录</TStepItem>
            <TStepItem Icon="IconName.Cart" Status="StepStatus.Process">购物车</TStepItem>
            <TStepItem Icon="IconName.Wallet">支付订单</TStepItem>
            <TStepItem Icon="IconName.Check">完成</TStepItem>
        </TStepGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup>
    <TStepItem Icon=""IconName.Login"" Status=""StepStatus.Finish"">登录</TStepItem>
    <TStepItem Icon=""IconName.Cart"" Status=""StepStatus.Process"">购物车</TStepItem>
    <TStepItem Icon=""IconName.Wallet"">支付订单</TStepItem>
    <TStepItem Icon=""IconName.Check"">完成</TStepItem>
</TStepGroup>
```
")
    </CodeContent>
</Example>

<Example Title="错误状态的步骤条">
    <Description>状态是 <code>Error</code> 会呈现错误的图标</Description>
    <RunContent>
        <TStepGroup>
            <TStepItem Icon="IconName.Login" Status="StepStatus.Finish">登录</TStepItem>
            <TStepItem Icon="IconName.Cart" Status="StepStatus.Finish">购物车</TStepItem>
            <TStepItem Icon="IconName.Wallet" Status="StepStatus.Error">支付订单</TStepItem>
            <TStepItem Icon="IconName.Check">完成</TStepItem>
        </TStepGroup>
        <br />
        <TStepGroup>
            <TStepItem Status="StepStatus.Finish">已完成的步骤</TStepItem>
            <TStepItem Status="StepStatus.Error">错误的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
            <TStepItem>未进行的步骤</TStepItem>
        </TStepGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup>
    <TStepItem Icon=""IconName.Login"" Status=""StepStatus.Finish"">登录</TStepItem>
    <TStepItem Icon=""IconName.Cart"" Status=""StepStatus.Process"">购物车</TStepItem>
    <TStepItem Icon=""IconName.Wallet"" Status=""StepStatus.Error"">支付订单</TStepItem>
    <TStepItem Icon=""IconName.Check"">完成</TStepItem>
</TStepGroup>
```
")
    </CodeContent>
</Example>
<Example Title="带额外内容的步骤条">
    <Description>显示地设置 <code>DescriptionContent</code> 和 <code>ExtraContent</code> 来定义额外的内容。</Description>
    <RunContent>
        <TStepGroup>
            <TStepItem Status="StepStatus.Finish">
                <ChildContent>步骤1</ChildContent>
                <DescriptionContent>步骤1的描述</DescriptionContent>                
            </TStepItem>
            <TStepItem Status="StepStatus.Finish">
                <ChildContent>步骤2</ChildContent>
                <DescriptionContent>步骤2的描述</DescriptionContent>
            </TStepItem>

            <TStepItem Status="StepStatus.Process">
                <ChildContent>步骤3</ChildContent>
                <DescriptionContent>步骤3的描述</DescriptionContent>
                <ExtraContent>
                    <TButton>上一步</TButton>
                    <TButton Theme="Theme.Primary">下一步</TButton>
                </ExtraContent>
            </TStepItem>
            <TStepItem>
                <ChildContent>步骤4</ChildContent>
                <DescriptionContent>步骤4的描述</DescriptionContent>
            </TStepItem>
        </TStepGroup>
    </RunContent>
    <CodeContent>
        @Code.Create(@"
```cshtml-razor
<TStepGroup>
    <TStepItem Status=""StepStatus.Finish"">
        <ChildContent>步骤1</ChildContent>
        <DescriptionContent>步骤1的描述</DescriptionContent>                
    </TStepItem>
    <TStepItem Status=""StepStatus.Finish"">
        <ChildContent>步骤2</ChildContent>
        <DescriptionContent>步骤2的描述</DescriptionContent>
    </TStepItem>

    <TStepItem Status=""StepStatus.Process"">
        <ChildContent>步骤3</ChildContent>
        <DescriptionContent>步骤3的描述</DescriptionContent>
        <ExtraContent>
            <TButton>上一步</TButton>
            <TButton Theme=""Theme.Primary"">下一步</TButton>
        </ExtraContent>
    </TStepItem>
    <TStepItem>
        <ChildContent>步骤4</ChildContent>
        <DescriptionContent>步骤4的描述</DescriptionContent>
    </TStepItem>
</TStepGroup>
```
")
    </CodeContent>
        </Example>
    </ChildContent>
    <ApiContent>
        <ApiDocument ComponentType="typeof(TStepGroup)"/>
        <ApiDocument ComponentType="typeof(TStepItem)" />
    </ApiContent>
</PageLayout>