组件

Step 步骤条

引导用户按照流程完成任务的分步导航条 API文档 组件问题反馈和讨论

使用方法

  • 显示当前页面所处的状态,提示用户需要完成几步,每一步要操作什么等。
  • 可根据实际应用场景设定步骤,不得少于2个步骤,每完成一个阶段,该阶段的状态高亮,表示此阶段已经完成。

基础样式 #

最基础简单的步骤条,默认状态加 nv-step-item 即为初始状态,表示全未完成, nv-step-finish 表示已经完成, nv-step-progress 表示正在进行
1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

  

显示代码

纵向排版样式 #

基于基础样式之上,在 nv-step 后面加 nv-step-vertical 属性即可纵向显示步骤条
1
Finished
This is a description.
2
In Progress
This is a description.
3
Waiting
This is a description.

显示代码

MINI样式 #

基于基础样式之上,在 nv-step 后面加 nv-step-small 属性即可展示MINI版样式
1
Finished
2
In Progress
3
Waiting

显示代码

带图标的步骤条 #

基于基础样式之上,在 nv-step 后面加 nv-step-icons 属性即可展示图标版本的步骤条, icon 使用方法详情见Icon 图标
Information
Verification
Done

显示代码

步骤运行错误 #

基于基础样式之上,在 nv-step 后面加 nv-step-error 属性即可,在 nv-step-error 下, nv-step-finish 表示已完成, nv-step-progress 表示出错状态
Finished
This is a description.
In Progress
This is a description.
3
Waiting
This is a description.
显示代码