Demos
How to import
Default step bar(Deprecated)
It is recommended to use the simple version of steps, which will be gradually deprecated later
Basic Steps(Recommended)
Set type=
"basic" to display a simple style step barNav Steps
You can use type="nav" to set the navigation style step bar. The navigation style step bar has the following characteristics:
- The step bar does not support interaction.
- It is suitable when the steps are not related to each other, the content does not affect each other, and the visual elements of the page need to be highlighted.
- The width of the step bar is opened according to the content.
- Steps.Step only supports title, className, and style attributes.
Mini size step bar
Display the mini size step bar by setting size=
"small"Processing progress
Use with content and buttons to represent the processing progress of a process
Steps bar in vertical direction
Show steps in vertical direction by setting direction
Specify step status
Using Steps
status Property to specify the state of the current step.Custom icons
By setting Steps.Step's
icon Properties, you can use custom icons.onChange CallBack
Since version 1.29.0, onChange is supported, which can be used to realize the processing progress. onChange receives a parameter of type number, which is equal to initial + current.
API reference
Steps
| Parameters | Instructions | type | Default | Version |
|---|---|---|---|---|
| className | Class name | string | ||
| current | Specifies the current step, counting from 0. In the subStep element, the state can be overridden by the status attribute | number | 0 | |
| direction | Specify step bar directions. Currently support level (vertical) and vertical (vertical) in both directions | string | with | |
| hasLine | When the step bar type is basic, you can control whether to display the connecting line | boolean | true | 1.18.0 |
| initial | Start serial number, count from 0. | number | 0 | |
| size | For simple step bar and navigation step bar, the size is optional, the value is small, default | string | default | 1.18.0 |
| status | Specify the status of the current step, optional wait,process,finish,error,warning | string | process | |
| style | Style | CSSProperties | ||
| type | Steps type, optional fill basic、nav | string | fill | 1.18.0 |
| onChange | onChange callback | (index: number)=>void | - | 1.29.0 |
Steps.Step
Step in the step bar.
| Parameters | Instructions | type | Default | Version |
|---|---|---|---|---|
| aria-label | Container aria-label | React.AriaAttributes["aria-label"] | ||
| description | Detailed description of steps, optional | ReactNode | - | |
| icon | Type of step icon, optional | ReactNode | - | |
| role | Container role | React.AriaRole | - | |
| status | Specify the state. When this property is not configured, the currentof Steps is used to automatically specify the state. Optional: wait,process,finish,error,warning | string | wait | |
| style | CSS Style | CSSProperties | ||
| title | Title | ReactNode | - | |
| onClick | Callback of click | function | - | |
| onKeyDown | Callback ok keyDown | function | - |
Accessibility
ARIA
- Steps and Step components support passing in the
aria-labelattribute to represent the description of Steps and Steps - Step component has an
aria-currentstepattribute, indicating that this is a step in the step bar
Content Guidelines
- Step title
- title should be kept concise, avoiding truncation and line breaks
- use sentence capitalization
- do not include punctuation
- Step description
- supplementary contextual information for the title
- don't end with punctuation
