Steps 步骤条 引导用户按照流程完成任务的分步导航条， 可根据实际应用场景设定步骤，步骤不得少于 2 步。
基础用法 简单的步骤条。
设置 active 属性，接受一个 Number，表明步骤的 index，从 0 开始。 需要定宽的步骤条时，设置 space 属性即可，它接受 Number， 单位为 px， 如果不设置，则为自适应。 设置 finish-status 属性可以改变已经完成的步骤的状态。
0Step 10Step 20Step 3Next stepvue
隐藏源代码含状态的步骤条 每一步骤显示出该步骤的状态。
也可以使用 title 具名插槽，可以用 slot 的方式来取代属性的设置， 在本文档最后的列表中有所有的插槽可供参考。
0Done0Processing0Step 3vue
style="max-width: 600px" :space="200" :active="1" finish-status="success" > 隐藏源代码居中的步骤条 标题和描述可以居中。 0Step 1Some description0Step 2Some description0Step 3Some descriptionvue 隐藏源代码带描述的步骤栏 每一步都有描述。 0Step 1Some description0Step 2Some description0Step 3Some descriptionvue 隐藏源代码带图标的步骤条 可以在步骤栏中使用各种自定义图标。 通过 icon 属性来设置图标， 图标的类型可以参考 Icon 组件的文档， 除此以外，还能通过具名 slot 来使用自定义的图标。 Step 1Step 2Step 3vue 隐藏源代码垂直的步骤条 垂直方向的步骤条。 只需要在 el-steps 元素中设置 direction 属性为 vertical 即可。 0Step 10Step 20Step 3vue
隐藏源代码简洁风格的步骤条 设置 simple 可应用简洁风格，该条件下 align-center / description / direction / space 都将失效。
Step 1Step 2Step 3Step 1Step 2Step 3vue
class="mb-4" style="max-width: 600px" :space="200" :active="1" simple > 隐藏源代码Steps API Steps Attributes 属性名说明类型默认space每个 step 的间距，不填写将自适应间距。 支持百分比。number / string''direction显示方向enumhorizontalactive设置当前激活步骤number0process-status设置当前步骤的状态enumprocessfinish-status设置结束步骤的状态enumfinishalign-center进行居中对齐boolean—simple是否应用简洁风格boolean—Steps Slots 插槽名说明子标签default默认插槽StepStep API Step Attributes 属性名说明类型默认title标题string''description描述文案string''iconStep 组件的自定义图标。 也支持 slot 方式写入string / Component—status设置当前步骤的状态， 不设置则根据 steps 确定状态enum''Step Slots 插槽名说明icon自定义图标title自定义标题description自定义描述文案源代码 组件 • 样式 • 文档 贡献者