Navigation · Steps
Steps
Decompose complex tasks or tasks with prior relationships, use step components to guide users to operate according to the prescribed process, and let them know their current progress
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 current of 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-label
attribute to represent the description of Steps and Steps - Step component has an
aria-current
step
attribute, 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