# 步骤条

表示多步流程走到了哪一步：数字或图标标记、连接线、当前步骤、出错步骤。你只写每步的标题，库生成标记并按当前步骤算出完成、进行中、未开始。容器放不下时自动改成纵向。

**依赖**：`zhaoui.css` 与 `zhaoui.js`（原生 HTML、CSS、JS，不需要框架或 jQuery）。

## 用法

```html
<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>
```

## 样式类

`zh-steps`、`zh-steps--h`、`zh-steps--v`、`zh-steps--sm`、`zh-steps--lg`、`zh-steps--dot`、`zh-step`

## 属性

| 属性 | 用在 | 取值 | 说明 |
|---|---|---|---|
| `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） |  | 纵向 / 小尺寸 / 大尺寸 / 极简圆点；默认是横向 |

## 方法

- `ZhaoUI.steps.set(el, { current, error, done })`：更新状态并重绘；设置 current 会清除错误态
- `ZhaoUI.steps.get(el)`：返回 { current, error, done }

## 事件

| 事件 | 触发于 | detail | 说明 |
|---|---|---|---|
| `zh:step-click` | <ol> | undefined | 可点击模式下点了某一步。是否真的跳转由你决定（比如先校验表单），然后调用 ZhaoUI.steps.set |

## 无障碍

- 当前步骤带 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。