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