SepSteps 步骤条组件 v1.0.0

引导用户按照流程完成任务 · 横向 / 纵向 · 步骤状态 · 点击切换

1. 基础用法(横向步骤条)

HTML 声明式标签
JS API 初始化

2. 带描述的步骤条

HTML 声明式标签
JS API 初始化

3. 纵向步骤条(direction="vertical")

HTML 声明式标签
JS API 初始化

4. 步骤状态(wait / process / finish / error)

HTML 声明式标签
JS API 初始化

5. 动态切换(setCurrent / next / prev)

JS API 初始化
current: 0, status: process

6. 点击交互(onChange 回调)

点击任意步骤,触发 onChange 回调,返回点击的步骤索引。

HTML 声明式标签
JS API 初始化
点击步骤查看回调

7. 点状步骤条(type="dot")

简洁的圆点样式,适用于轻量流程展示。

HTML 声明式标签
JS API 初始化

8. 导航箭头步骤条(type="navigation")

箭头形状的步骤条,适用于面包屑式导航或流程指引。

HTML 声明式标签
JS API 初始化

💡 每个步骤可通过 icon 自定义图标(如 SepIcons.get('home')),未设置时显示序号,finish/error 自动显示状态图标。

箭头方向(arrow):right / left / down / up

8a. 紧凑尺寸(size="small")

缩小图标/文字/间距,适合空间有限的场景。

HTML 声明式标签
JS API 初始化
纵向 + small
dot + small

9. 自动化断言