# Steps

- Page: https://jiguang132.com/resources/ant-design-mobile/docs/steps
- Resource: Ant Design Mobile (https://jiguang132.com/resources/ant-design-mobile.md)
- All guides: https://jiguang132.com/resources/ant-design-mobile/docs.md

A navigation bar that guides the user through a process to complete a task.

## Install

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

antd-mobile is for mobile web, not React Native or Mini Programs. React 19 projects must register `createRoot` with `unstableSetRender` at the entry, or imperative APIs such as Toast and Dialog cannot render. Switch dark mode with `<html data-prefers-color-scheme="dark">`.

Examples come from the official Ant Design Mobile repository (MIT) at the commit published as npm 5.43.0. Presentation helpers such as `DemoBlock` are JGuang rewrites, not antd-mobile APIs.

A navigation bar that guides the user through a process to complete a task.

## When to Use

When a task is complex or has precedence, break it down into a series of steps to simplify the task.

## Demos

## Steps

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| current | The specified current step, counting from 0. In the child Step element, the status can be overridden by the `status` attribute | `number` | `0` |
| direction | The specified direction of the step bar. Currently supports horizontal (`horizontal`) and vertical (`vertical`) two directions | `'horizontal' \| 'vertical'` | `'horizontal'` |

### CSS Variables

| Name | Description | Default |
| --- | --- | --- |
| --description-font-size | Font size of description. | `12px` |
| --icon-size | Size of the icons in the indicator. | `18px` |
| --indicator-margin-right | The extra space between indicator and text content. | `0` |
| --title-font-size | Font size of title. | `13px` |

## Steps.Step

### Props

| Name | Description | Type | Default |
| --- | --- | --- | --- |
| description | Detailed description of the Steps, optional | `ReactNode` | - |
| icon | Type of the Steps icon | `ReactNode` | - |
| status | The specified status. When this property is not configured, the `current` of `Steps` would be used to automatically specify the state; if the prop does not match the state specified by `current`, the automatically matched state would be overwritten. | `'wait' \| 'process' \| 'finish' \| 'error'` | `'wait'` |
| title | Title | `ReactNode` | - |

---

Index of all JGuang resources: https://jiguang132.com/llms.txt