Steps 步骤条

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

基础用法

简单的步骤条。

含状态的步骤条

每一步骤显示出该步骤的状态。

居中的步骤条

标题和描述可以居中。

带描述的步骤栏

每一步都有描述。

带图标的步骤条

可以在步骤栏中使用各种自定义图标。

垂直的步骤条

垂直方向的步骤条。

简洁风格的步骤条

设置 simple 可应用简洁风格,该条件下 align-center / description / direction / space 都将失效。

Steps 属性

属性说明类型可选值默认值
space每个 step 的间距,不填写将自适应间距。 支持百分比。number / string
direction显示方向stringvertical/horizontalhorizontal
active设置当前激活步骤number0
process-status设置当前步骤的状态stringwait / process / finish / error / successprocess
finish-status设置结束步骤的状态stringwait / process / finish / error / successfinish
align-center进行居中对齐booleanfalse
simple是否应用简洁风格boolean-false

Steps 插槽

插槽名说明子标签
-默认插槽Step

Step 属性

属性说明类型可选值默认值
title标题string
description描述文案string
iconStep 组件的自定义图标。 也支持 slot 方式写入string / Component
status设置当前步骤的状态, 不设置则根据 steps 确定状态stringwait / process / finish / error / success

Step 插槽

插槽名说明
icon自定义图标
title自定义标题
description自定义描述文案

源代码

组件文档

贡献者