步骤条
表示多步流程走到了哪一步：数字或图标标记、连接线、当前步骤、出错步骤。你只写每步的标题，库生成标记并按当前步骤算出完成、进行中、未开始。容器放不下时自动改成纵向。
带行为 核心包 1 个事件 2 个方法
示例
代码
<div class="zh-stack">
<ol data-zh-steps data-current="1" aria-label="开通流程">
<li data-title="填写信息" data-desc="企业与联系人"></li>
<li data-title="资质审核" data-desc="约 1 个工作日"></li>
<li data-title="开通完成"></li>
</ol>
<ol data-zh-steps data-mode="icon" data-current="2" data-error="1" data-error-text="文件过大" aria-label="上传流程">
<li data-title="选择文件" data-icon="file-text"></li>
<li data-title="上传" data-icon="settings"></li>
<li data-title="完成" data-icon="check"></li>
</ol>
</div>属性
| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
data-zh-steps | <ol> | 里面放 <li data-title="…"> | 声明为步骤条；<li> 里的内容会被替换 |
data-title / data-desc | <li> | 文字 | 步骤标题与说明（图标模式不显示说明） |
data-icon | <li> | 图标名 | 图标模式下该步的图标；完成变成对勾，出错变成叉 |
data-current | <ol> | 从 0 开始的序号，默认 0 | 当前步骤；之前的算已完成，之后的未开始 |
data-error | <ol> | 出错步骤的序号 | 该步显示为错误；可配 data-error-text 写出错说明 |
data-done | <ol> | 全部完成 | |
data-mode | <ol> | icon | 用图标代替数字 |
data-clickable | <ol> | 每一步变成按钮，点击触发 zh:step-click；data-reach 指定最远可点到哪一步，默认只到当前步 | |
zh-steps--v / --sm / --lg / --dot | <ol>（class） | 纵向 / 小尺寸 / 大尺寸 / 极简圆点；默认是横向 |
事件
| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
zh:step-click | <ol> | undefined | 可点击模式下点了某一步。是否真的跳转由你决定（比如先校验表单），然后调用 ZhaoUI.steps.set |
方法
ZhaoUI.steps.set(el, { current, error, done })：更新状态并重绘；设置 current 会清除错误态ZhaoUI.steps.get(el)：返回 { current, error, done }
样式类
zh-steps zh-steps--h zh-steps--v zh-steps--sm zh-steps--lg zh-steps--dot zh-step
无障碍
- 当前步骤带 aria-current="step"
- 状态不只靠颜色：完成是对勾，出错是叉，并且可以写出错文字
- 外面的 <ol> 请加 aria-label 说明是什么流程
常见问题
步骤条是什么？
表示多步流程走到了哪一步：数字或图标标记、连接线、当前步骤、出错步骤。你只写每步的标题，库生成标记并按当前步骤算出完成、进行中、未开始。容器放不下时自动改成纵向。
怎么使用步骤条？
先在页面里引入 zhaoui.css 和 zhaoui.js（放在 </body> 前，不加 defer），再照本页「用法」里的标记书写；需要用代码控制时，用「方法」里列出的接口。
步骤条有哪些事件？
zh:step-click（可点击模式下点了某一步。是否真的跳转由你决定（比如先校验表单），然后调用 ZhaoUI.steps.set）。
步骤条有哪些方法？
ZhaoUI.steps.set(el, { current, error, done })：更新状态并重绘；设置 current 会清除错误态；ZhaoUI.steps.get(el)：返回 { current, error, done }。
步骤条支持键盘和读屏吗？
当前步骤带 aria-current="step"；状态不只靠颜色：完成是对勾，出错是叉，并且可以写出错文字；外面的 <ol> 请加 aria-label 说明是什么流程。
步骤条需要依赖框架吗？
不需要。ZhaoUI 是原生 HTML、CSS 和 JavaScript，不依赖 jQuery、Vue 或 React。