Steps
Guide the user to complete tasks in accordance with the process.
Its steps can be set according to the actual application scenario and the number of the steps can't be less than 2.
Basic usage
Simple step bar.
Set active attribute with Number type, which indicates the index of steps and starts from 0.
Step bar with description
There is description for each step.
Step bar with icon
A variety of custom icons can be used in the step bar.
The icon is set by the icon property. The types of icons can be found in the document for the Icon component. In addition, you can customize the icon through a named slot.
Vertical step bar
Vertical step bars.
You only need to set the vertical in the b-steps element.
Steps Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
| vertical | display in vertical direction | boolean | — | false |
| active | current activation step | number | — | 0 |
Steps Slots
| Name | Description | Subtags |
|---|---|---|
| - | customize default content | Step |
Step Attributes
| Name | Description | Type | Accepted Values | Default |
|---|---|---|---|---|
| title | step title | string | — | — |
| description | step description | string | — | — |
| icon | step custom icon. Icons can be passed via named slot as well | string / Component | — | — |
| status | current status. It will be automatically set by Steps if not configured. | string | wait / process / finish / error / success | — |
Step Slots
| Name | Description |
|---|---|
| icon | custom icon |
| title | step title |
| description | step description |