Enterprise-level component library based on Bootstrap and Blazor

star nuget master download license repo commit

Steps 步骤条

引导用户按照流程完成任务的导航条

引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步

Steps 组件支持通过设置 Items 属性或者直接内嵌 Step 组件两种方式进行 UI 呈现

基础用法

简单的步骤条,通过直接绑定数据源 Items 即可

Demo
1
步骤一
2
步骤二
3
步骤三

基础用法

简单的步骤条,组件内部直接使用 Step 组件设置步骤

Demo
步骤一
2
步骤二
步骤三
步骤四
5
步骤五

有描述的步骤条

每个步骤有其对应的步骤状态描述

Demo
步骤一
这是一段很长很长很长的描述性文字
3
步骤二
这是一段很长很长很长的描述性文字
4
步骤三
这是一段很长很长很长的描述性文字
5
步骤四
结束语

居中的步骤条

标题和描述都将居中

Demo
步骤一
这是一段很长很长很长的描述性文字
步骤二
这是一段很长很长很长的描述性文字
3
步骤三
这是一段很长很长很长的描述性文字
4
步骤四
结束语

带图标的步骤条

步骤条内可以启用各种自定义的图标

Demo
步骤一
这是一段很长很长很长的描述性文字
步骤二
这是一段很长很长很长的描述性文字
步骤三
这是一段很长很长很长的描述性文字
步骤四
结束语

Attributes

Loading...

StepItem 属性

Loading...

事件 Events

Loading...
@page "/stepss"

<h3>Steps 步骤条</h3>

<h4>引导用户按照流程完成任务的导航条</h4>

<p>引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步</p>

<p><code>Steps</code> 组件支持通过设置 <code>Items</code> 属性或者直接内嵌 <code>Step</code> 组件两种方式进行 UI 呈现</p>

<Block Title="基础用法" Introduction="简单的步骤条,通过直接绑定数据源 <code>Items</code> 即可">
    <Steps Items="@Items" OnStatusChanged="@OnStatusChanged" />
    <div class="mt-1">
        <Button OnClick="@NextStep" IsOutline="true">下一步</Button>
        <Button OnClick="@ResetStep" IsOutline="true">重 置</Button>
    </div>
    <Logger @ref="Trace" class="mt-3" />
</Block>

<Block Title="基础用法" Introduction="简单的步骤条,组件内部直接使用 <code>Step</code> 组件设置步骤">
    <Steps>
        <Step Title="步骤一" Space="25%" Status="StepStatus.Success"></Step>
        <Step Title="步骤二" Space="25%" Status="StepStatus.Process" StepIndex="1"></Step>
        <Step Title="步骤三" Space="25%" Status="StepStatus.Error" StepIndex="2"></Step>
        <Step Title="步骤四" Space="25%" Status="StepStatus.Finish" StepIndex="3"></Step>
        <Step Title="步骤五" Space="25%" StepIndex="4" IsLast="true"></Step>
    </Steps>
</Block>

<Block Title="有描述的步骤条" Introduction="每个步骤有其对应的步骤状态描述">
    <Steps>
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" StepIndex="3" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="4" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="居中的步骤条" Introduction="标题和描述都将居中">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" Status="StepStatus.Finish" StepIndex="0" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" Status="StepStatus.Success" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" Status="StepStatus.Process" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<Block Title="带图标的步骤条" Introduction="步骤条内可以启用各种自定义的图标">
    <Steps IsCenter="true">
        <Step Title="步骤一" Space="33.33%" IsIcon="true" Icon="fa fa-user" Status="StepStatus.Success" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤二" Space="33.33%" IsIcon="true" Icon="fa fa-user-plus" Status="StepStatus.Process" StepIndex="1" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤三" Space="33.33%" IsIcon="true" Icon="fa fa-users" StepIndex="2" Description="这是一段很长很长很长的描述性文字"></Step>
        <Step Title="步骤四" Space="33.33%" IsIcon="true" Icon="fa fa-user-secret" StepIndex="3" IsLast="true" Description="结束语"></Step>
    </Steps>
</Block>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="StepItem 属性" Items="@GetStepItemAttributes()" />

<EventTable Items="@GetEvents()" />
根据相关法律政策,该内容无法显示

B 站相关视频链接

暂无

交流群

QQ群:BootstrapAdmin & Blazor 795206915(满) 675147445 欢迎加群讨论
Themes
Bootstrap
Ant Design (完善中)
Bluma (完善中)
LayUI (完善中)
An error has occurred. This application may no longer respond until reloaded. Reload