Steps
Steps is a navigation bar that guides users through the steps of a task.
When To Use#
When the 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#
Finished
This is a description
2
In Progress
This is a description
3
Waiting
This is a description
Finished
2
In Progress
3
Waiting
Error status#
Finished
This is a description
In Progress
This is a description
3
Waiting
This is a description
Finished
In Progress
3
Waiting
Vertical#
Finished
This is a description
2
In Progress
This is a description
3
Waiting
This is a description
Finished
2
In Progress
3
Waiting
Vertical & Error status#
Finished
This is a description
In Progress
This is a description
3
Waiting
This is a description
Finished
In Progress
3
Waiting
Switch Step#
1
First
This is a description
2
Second
This is a description
3
Last
This is a description
First-content
API#
Steps#
| Property | Description | Type | Default |
|---|---|---|---|
current | To set the current step, counting from 0. You can overwrite this state by using status of Step | number | |
direction | To specify the direction of the step bar | 'horizontal' | 'vertical' | |
onCurrentChange | Trigger when Step is changed | (count: number) => void |
Steps.Step#
| Property | Description | Type | Default |
|---|---|---|---|
title | Title of the step | string | |
description | Description of the step, optional property | string | |
status | To specify the status. It will be automatically set by current of Steps if not configured. | 'finish' | 'progress' | 'wait' | 'error' |