# 步骤条 Steps

- 页面: https://jiguang132.com/zh/resources/ant-design-mobile/docs/steps
- 资源: Ant Design Mobile (https://jiguang132.com/zh/resources/ant-design-mobile.md)
- 全部指南: https://jiguang132.com/zh/resources/ant-design-mobile/docs.md

引导用户按照流程完成任务的导航条。

## 安装

```bash
npm install antd-mobile@5.43.0
```

antd-mobile 是移动网页组件库，不是 React Native 或小程序组件。React 19 项目需在入口用 `unstableSetRender` 注册 `createRoot`，否则 Toast、Dialog 等命令式 API 无法渲染；深色模式通过 `<html data-prefers-color-scheme="dark">` 切换。

示例来自 Ant Design Mobile 官方仓库（MIT），固定在 npm 5.43.0 对应的提交；示例中的 `DemoBlock` 等展示辅助组件由 JGuang 重写，不属于 antd-mobile 的 API。

引导用户按照流程完成任务的导航条。

## 何时使用

当任务复杂或者存在先后关系时，将其分解成一系列步骤，从而简化任务。

## 示例

## Steps

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| current | 指定当前步骤，从 0 开始记数。在子 Step 元素中，可以通过 `status` 属性覆盖状态 | `number` | `0` |
| direction | 指定步骤条方向。目前支持水平（`horizontal`）和竖直（`vertical`）两种方向 | `'horizontal' \| 'vertical'` | `'horizontal'` |

### CSS 变量

| 属性 | 说明 | 默认值 |
| --- | --- | --- |
| --description-font-size | 描述的字号 | `12px` |
| --icon-size | 指示器上图标的大小 | `18px` |
| --indicator-margin-right | 左边的指示器和右边的文字内容之间的额外间距 | `0` |
| --title-font-size | 标题的字号 | `13px` |

## Steps.Step

### 属性

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| description | 步骤的详情描述，可选 | `ReactNode` | - |
| icon | 步骤图标的类型 | `ReactNode` | - |
| status | 指定状态。当不配置该属性时，会使用 `Steps` 的 `current` 来自动指定状态；如果该属性与 `current` 指定的状态不匹配会覆盖自动匹配的状态。 | `'wait' \| 'process' \| 'finish' \| 'error'` | `'wait'` |
| title | 标题 | `ReactNode` | - |

---

JGuang 全部资源索引: https://jiguang132.com/llms.txt