Skip to content

Steps 步骤条

引导用户按流程完成任务的步骤指示器,支持等待 / 进行中 / 完成 / 错误四种状态、纵向排布与可点击跳转。

基础用法

进行中

完成态

全部完成

初始步骤

初始等待

四种状态

通过每步的 status 字段显式指定状态:wait 等待(次要色 + 序号)、process 进行中(主色 + 序号)、finish 完成(成功色 + ✓)、error 错误(危险色 + ✕)。

wait / process / finish / error

可点击切换

clickable 开启后步骤项可点击跳转(整项可点,Enter/Space 键盘可达),点击派发 oas-change(detail 为 { index })并切换当前步。

点击步骤切换当前步

无描述

仅标题

纵向

纵向方向

API

属性

属性说明类型默认值
clickable步骤可点击跳转(布尔,存在即开启)boolean
current当前步骤索引(0 起)string0
direction方向stringhorizontal
steps[{ title, description?, status? }] JSON 字符串StepItem[] | string[]

事件

事件说明
oas-change点击可点击步骤时触发(含键盘触发);detail: { index }(0 起)

状态规则:显式 statuswait / process / finish / error)优先;未指定时按 current 推导——索引 < currentfinish(✓),=== currentprocess,其余为 wait