Steps
Steps
A navigation bar that guides users through the steps of a task.
Importimport{ Steps }from"antd"; |
Sourcecomponents/steps |
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
Finished
This is a description.
In Progress
Left 00:00:08
This is a description.
Waiting
This is a description.
The most basic step bar.
Finished
In Progress
Waiting
By setting like this: <Steps size="small">, you can get a mini version.
Login
Verification
Pay
Done
You can use your own custom icons by setting the property icon for items.
First
Second
Last
First-content
Cooperate with the content and buttons, to represent the progress of a process.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
A simple step bar in the vertical direction.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
A simple mini version step bar in the vertical direction.
In Process
This is a description
Waiting
This is a description
By using status of Steps, you can specify the state for current step.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description. This is a description.
Finished
This is a description. This is a description.
In Progress
This is a description. This is a description.
Waiting
This is a description.
Waiting
This is a description.
Steps with progress dot style.
Finished
You can hover on the dot.
In Progress
You can hover on the dot.
Waiting
You can hover on the dot.
Waiting
You can hover on the dot.
You can customize the display for Steps with progress dot style.
Step 1
This is a description.
Step 2
This is a description.
Step 3
This is a description.
Step 1
This is a description.
Step 2
This is a description.
Step 3
This is a description.
Setting onChange makes Steps clickable.
Navigation steps.
Finished
This is a description.
In Progress
Left 00:00:08
This is a description.
Waiting
This is a description.
Steps with progress.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Finished
This is a description.
In Progress
This is a description.
Waiting
This is a description.
Set labelPlacement to vertical.
- Step 1This is a Step 1.Step 2This is a Step 2.Step 3This is a Step 3.
- Step 2This is a Step 2.Step 3This is a Step 3.
- Step 1This is a Step 1.Step 2This is a Step 2.Step 3This is a Step 3.
- Step 1This is a Step 1.Step 2This is a Step 2.Step 3This is a Step 3.
Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
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 | - |
Design Token
Component TokenHow to use?
| Token Name | Description | Type | Default Value |
|---|---|---|---|
| customIconFontSize | Font size of custom icon | number | 24 |
| customIconSize | Size of custom icon container | number | 32 |
| customIconTop | Top of custom icon | number | 0 |
| descriptionMaxWidth | Max width of description area | number | 140 |
| dotCurrentSize | Current size of dot | number | 10 |
| dotSize | Size of dot | number | 8 |
| iconFontSize | Size of icon | number | 14 |
| iconSize | Size of icon container | number | 32 |
| iconSizeSM | Size of small steps icon | number | 24 |
| iconTop | Top of icon | number | -0.5 |
| navArrowColor | Color of arrow in nav | string | rgba(0,0,0,0.25) |
| navContentMaxWidth | Max width of nav content | undefined | MaxWidth<string | number> | auto |
| titleLineHeight | Line height of title | string | number | 32 |