Steps 步骤条
引导用户按照流程完成任务。 它的步骤可以根据实际应用场景来设置，但步骤不能少于 2 步。
基础用法
简单的步骤条。
含状态的步骤条
显示每个步骤的状态。
居中
标题和描述可以居中。
带描述的步骤条
每个步骤都有描述。
带图标的步骤条
在步骤条中可以使用各种自定义图标。
垂直步骤条
垂直的步骤条。
简洁风格的步骤条
简洁风格的步骤条，其中 align-center、description、direction 和 space 属性都将被忽略。
Steps API
Steps 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| space | 每个 step 的间距，如果省略，则会自适应。 支持百分比。 | number / string | '' |
| direction | 显示方向 | 枚举 | horizontal |
| active | 当前激活的步骤 | number | 0 |
| process-status | 当前步骤的状态 | 枚举 | process |
| finish-status | 结束步骤的状态 | 枚举 | finish |
| align-center | 标题和描述居中 | boolean | — |
| simple | 是否应用简洁主题 | boolean | — |
Steps 插槽
| 名称 | 描述 | 子标签 |
|---|---|---|
| default | 自定义默认内容 | Step |
Step API
Step 属性
| 名称 | 描述 | 类型 | 默认值 |
|---|---|---|---|
| title | 步骤标题 | string | '' |
| description | 步骤描述 | string | '' |
| icon | 步骤的自定义图标。 图标也可以通过命名插槽传入 | string / Component | — |
| status | 当前状态。 如果未配置，它将由 Steps 自动设置。 | 枚举 | '' |
Step 插槽
| 名称 | 描述 |
|---|---|
| icon | 自定义图标 |
| title | 步骤标题 |
| description | 步骤描述 |
来源
贡献者
