Steps
A navigation bar that guides the user through a process to complete a task.
Install
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 | - |