mirror of
https://github.com/ant-design/ant-design.git
synced 2024-12-28 02:58:32 +08:00
20561d6f9d
* docs: init ref * docs all support * docs: fix link show
4.6 KiB
4.6 KiB
category | group | title | description | cover | coverDark |
---|---|---|---|---|---|
Components | Navigation | Steps | A navigation bar that guides users through the steps of a task. | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*677sTqCpE3wAAAAAAAAAAAAADrJ8AQ/original | https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*cFsBQLA0b7UAAAAAAAAAAAAADrJ8AQ/original |
When To Use
When a given task is complicated or has a certain sequence in the series of subtasks, we can decompose it into several steps to make things easier.
Examples
Basic
Mini version
With icon
Switch Step
Vertical
Vertical mini version
Error status
Dot Style
Customized Dot Style
Dot Style Size Small
Clickable
Navigation Steps
Steps with progress
Label Placement
Progress Debug
Steps inside Steps
Inline Steps
Wireframe
Component Token
API
Common props ref:Common props
Steps
The whole of the step bar.
Property | Description | Type | Default | Version |
---|---|---|---|---|
className | Additional class to Steps | string | - | |
current | To set the current step, counting from 0. You can overwrite this state by using status of Step |
number | 0 | |
direction | To specify the direction of the step bar, horizontal or vertical |
string | horizontal |
|
initial | Set the initial step, counting from 0 | number | 0 | |
labelPlacement | Place title and description with horizontal or vertical direction |
string | horizontal |
|
percent | Progress circle percentage of current step in process status (only works on basic Steps) |
number | - | 4.5.0 |
progressDot | Steps with progress dot style, customize the progress dot by setting it to a function. labelPlacement will be vertical |
boolean | (iconDot, {index, status, title, description}) => ReactNode | false | |
responsive | Change to vertical direction when screen width smaller than 532px |
boolean | true | |
size | To specify the size of the step bar, default and small are currently supported |
string | default |
|
status | To specify the status of current step, can be set to one of the following values: wait process finish error |
string | process |
|
type | Type of steps, can be set to one of the following values: default navigation inline |
string | default |
inline: 5.0 |
onChange | Trigger when Step is changed | (current) => void | - | |
items | StepItem content | StepItem | [] | 4.24.0 |
type="inline"
Property | Description | Type | Default | Version |
---|---|---|---|---|
className | Additional class to Steps | string | - | |
current | To set the current step, counting from 0. You can overwrite this state by using status of Step |
number | 0 | |
initial | Set the initial step, counting from 0 | number | 0 | |
status | To specify the status of current step, can be set to one of the following values: wait process finish error |
string | process |
|
onChange | Trigger when Step is changed | (current) => void | - | |
items | StepItem content. not supported: icon subtitle |
StepItem | [] | 4.24.0 |
StepItem
A single step in the step bar.
Property | Description | Type | Default | Version |
---|---|---|---|---|
description | Description of the step, optional property | ReactNode | - | |
disabled | Disable click | boolean | false | |
icon | Icon of the step, optional property | ReactNode | - | |
status | To specify the status. It will be automatically set by current of Steps if not configured. Optional values are: wait process finish error |
string | wait |
|
subTitle | Subtitle of the step | ReactNode | - | |
title | Title of the step | ReactNode | - |