- Components Overview
- General
- Layout
- Navigation
- Data Entry
- Data Display
- Feedback
- Other
Steps is a navigation bar that guides users through the steps of a task.
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.
Common props ref：Common props
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 |
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 | - |
| 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 |
| finishIconBorderColor | string | #1677ff | |
| 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 | number | 32 |
The most basic step bar.
By setting like this: <Steps size="small">, you can get a mini version.
You can use your own custom icons by setting the property icon for items.
Cooperate with the content and buttons, to represent the progress of a process.
A simple step bar in the vertical direction.
A simple mini version step bar in the vertical direction.
By using status of Steps, you can specify the state for current step.
Steps with progress dot style.
You can customize the display for Steps with progress dot style.
Setting onChange makes Steps clickable.
Navigation steps.
Steps with progress.
Set labelPlacement to vertical.
Inline type steps, suitable for displaying the process and current state of the object in the list content scene.
