# Steps 步骤条
引导用户按照流程完成任务的分步导航条,可根据实际应用场景设定步骤,步骤不得少于 2 步。
# 基础用法
简单的步骤条。
设置active
属性,接受一个Number
,表明步骤的 index,从 0 开始。需要定宽的步骤条时,设置space
属性即可,它接受Boolean
,单位为px
,如果不设置,则为自适应。设置finish-status
属性可以改变已经完成的步骤的状态。
0
步骤 1
0
步骤 2
0
步骤 3
# 有描述的步骤条
每个步骤有其对应的步骤状态描述。
0
步骤 1
这是一段很长很长很长的描述性文字
0
步骤 2
这是一段很长很长很长的描述性文字
0
步骤 3
这段就没那么长了
# 居中的步骤条
标题和描述都将居中。
0
步骤1
这是一段很长很长很长的描述性文字
0
步骤2
这是一段很长很长很长的描述性文字
0
步骤3
这是一段很长很长很长的描述性文字
0
步骤4
这是一段很长很长很长的描述性文字
# 带图标的步骤条
步骤条内可以启用各种自定义的图标。
通过icon
属性来设置图标,图标的类型可以参考 Icon 组件的文档,除此以外,还能通过具名slot
来使用自定义的图标。
步骤 1
步骤 2
步骤 3
# 竖式步骤条
竖直方向的步骤条。
只需要在el-steps
元素中设置direction
属性为vertical
即可。
0
步骤 1
0
步骤 2
0
步骤 3
这是一段很长很长很长的描述性文字
# 简洁风格的步骤条
设置 simple
可应用简洁风格,该条件下 align-center
/ description
/ direction
/ space
都将失效。
步骤 1
步骤 2
步骤 3
步骤 1
步骤 2
步骤 3