仅桌面端保证样式
Steps 步骤条
引导用户按步骤完成任务的导航条，由 eb-step 声明各步骤（按挂载顺序编号）。容器通过 active 自动推算每步状态：索引小于 active 的为完成态、等于的为进行态、大于的为等待态；status 可对单个步骤显式覆盖，支持竖向、居中与简洁模式。
基础用法
active 为当前步骤索引（从 0 开始），步骤状态随其联动变化。
1
提交申请
填写并提交工单
1
审核中
等待管理员审核
1
处理中
工程师跟进处理
1
已完成
动态推进
active 响应式变化即可驱动步骤条，常与表单分步、向导流程配合；点击按钮观察三种状态（完成 / 进行 / 等待）的切换。
1
注册账号
填写基础信息
1
实名认证
上传证件照片
1
开通服务
选择服务套餐
1
完成
竖向与自定义状态
direction="vertical" 竖向排列，space 控制步骤间距（数字按 px，也可传 CSS 宽度）；status 显式指定某步状态（如 error），优先级高于自动推算。
1
注册账号
2026-08-01 完成
1
实名认证
审核未通过
1
开通服务
认证通过后可操作
状态语义变体
process-status 定义当前步骤的样式语义，finish-status 定义已完成步骤的样式语义，均支持 wait / process / finish / error / success 五种状态。
1
身份校验
1
风控审核
触发风控规则
1
放款
简洁模式
simple 使用轻量样式（无连接线、图标缩小、自动居中，效果等同同时开启 align-center），适合表单顶部或弹窗内的进度提示。
1
下单
1
支付
1
收货
图标与插槽
icon 传入图标名后替代序号圆圈；#icon、#title、#description 插槽可分别完全接管图标区、标题与描述。
账号注册
已注册
OTP
安全验证
短信验证码校验
1
开通服务
等待开始
API
Steps Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| active | 当前步骤索引（从 0 开始） | number | 0 |
| direction | 排列方向 | horizontal | vertical | horizontal |
| space | 步骤宽度间距（数字按 px，字符串按 CSS 值），作用于 flex-basis | number | string | |
| processStatus | 当前步骤状态 | wait | process | finish | error | success | process |
| finishStatus | 已完成步骤状态 | wait | process | finish | error | success | finish |
| alignCenter | 标题居中（simple 模式自动生效） | boolean | false |
| simple | 简洁模式（自动居中，隐藏连接线） | boolean | false |
Steps Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| default | eb-step 列表 | — | — |
Step Props
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| title | 步骤标题 | string | |
| description | 步骤描述 | string | |
| icon | 图标名（设置后替代序号圆圈；simple 模式图标为 16px，否则 22px） | string | |
| status | 手动指定状态，覆盖基于 active 的自动推算 | wait | process | finish | error | success |
Step Slots
| 参数 | 说明 | 类型 | 默认值 |
|---|---|---|---|
| icon | 自定义图标区（完全接管 head 区域） | — | — |
| title | 自定义标题 | — | — |
| description | 自定义描述 | — | — |