Steps 步骤条
引导用户按流程完成任务的步骤指示器,支持等待 / 进行中 / 完成 / 错误四种状态、纵向排布与可点击跳转。
基础用法
进行中
完成态
全部完成
初始步骤
初始等待
四种状态
通过每步的 status 字段显式指定状态:wait 等待(次要色 + 序号)、process 进行中(主色 + 序号)、finish 完成(成功色 + ✓)、error 错误(危险色 + ✕)。
wait / process / finish / error
可点击切换
clickable 开启后步骤项可点击跳转(整项可点,Enter/Space 键盘可达),点击派发 oas-change(detail 为 { index })并切换当前步。
点击步骤切换当前步
无描述
仅标题
纵向
纵向方向
API
属性
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
clickable | 步骤可点击跳转(布尔,存在即开启) | boolean | — |
current | 当前步骤索引(0 起) | string | 0 |
direction | 方向 | string | horizontal |
steps | [{ title, description?, status? }] JSON 字符串 | StepItem[] | string | [] |
事件
| 事件 | 说明 |
|---|---|
oas-change | 点击可点击步骤时触发(含键盘触发);detail: { index }(0 起) |
状态规则:显式 status(wait / process / finish / error)优先;未指定时按 current 推导——索引 < current 为 finish(✓),=== current 为 process,其余为 wait。