Steps 步骤条
引导用户按流程完成任务；步骤数量可按场景配置，且不应少于 2 步。
基础用法
简单步骤条。
active 为 number 类型，表示当前激活步骤索引（从 0 开始）。若需固定每步宽度，可设置 space（数字，单位为 px）；不设置则自适应。finish-status 可配置已完成步骤的状态样式。
0
Step 1
0
Step 2
0
Step 3
含状态步骤
为各步展示不同状态。
使用 title 设置步骤名，或通过具名插槽覆盖。本页末尾列出全部插槽名称。
0
Done
0
Processing
0
Step 3
居中对齐
标题与描述可居中展示。
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
带描述
每步可附带描述文案。
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
带图标
步骤条中可使用多种自定义图标。
通过 icon 设置图标类型（详见图标组件文档），也可使用具名插槽自定义。
Step 1
Step 2
Step 3
竖直步骤条
将 u-steps 的 direction 设为 vertical。
0
Step 1
0
Step 2
0
Step 3
简洁风格
简洁模式下将忽略 align-center、description、direction 与 space。
Step 1
Step 2
Step 3
Step 1
Step 2
Step 3
Dot 模式
使用圆点样式的步骤条，适合步骤较多的场景。
设置 mode="dot" 启用圆点模式，已完成的步骤显示为蓝色圆点，当前步骤高亮显示，等待步骤显示为灰色。
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
0
Step 4
Some description
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
0
Step 4
Some description
0
Step 5
Some description
不同尺寸
步骤条图标支持三种尺寸：大(36px)、中(24px)、小(20px)。
使用 size 属性设置图标尺寸，可选值为 large、middle、small。
Large (36px)
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
Middle (24px) - Default
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
Small (20px)
0
Step 1
Some description
0
Step 2
Some description
0
Step 3
Some description
Dot Mode with Different Sizes
0
Step 1
Large
0
Step 2
Large
0
Step 3
Large
0
Step 1
Middle
0
Step 2
Middle
0
Step 3
Middle
0
Step 1
Small
0
Step 2
Small
0
Step 3
Small
步骤条 API
步骤条 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| space | 每步间距；不传则自适应，支持百分比 | number / string | '' |
| direction | 排列方向 | enum | horizontal |
| active | 当前激活步骤索引 | number | 0 |
| process-status | 当前步骤状态 | enum | process |
| finish-status | 结束步骤状态 | enum | finish |
| align-center | 标题与描述是否居中 | boolean | — |
| simple | 是否简洁主题 | boolean | — |
| mode | 步骤条模式，可选 dot 圆点模式 | enum | default |
| size | 步骤图标尺寸，可选 large(36px)、middle(24px)、small(20px) | enum | middle |
步骤条 事件
| 事件名 | 说明 | 类型 |
|---|---|---|
| change | 激活步骤变化时触发 | Function |
步骤条 插槽
| 名称 | 说明 | 子标签 |
|---|---|---|
| default | 默认内容 | 步骤项 |
步骤项 API
步骤项 属性
| 名称 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 标题 | string | '' |
| description | 描述 | string | '' |
| icon | 自定义图标；也可用插槽传入 | string / Component | — |
| status | 当前状态；不传时由步骤条自动推导 | enum | '' |
步骤项 插槽
| 名称 | 说明 |
|---|---|
| icon | 自定义图标 |
| title | 标题 |
| description | 描述 |