2021-10-22 19:32:39 +08:00
---
2021-10-25 15:21:08 +08:00
title: Steps
2021-10-22 19:32:39 +08:00
lang: en-US
---
2021-09-17 00:18:50 +08:00
# Steps
2020-08-13 15:18:26 +08:00
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.
2021-09-17 00:18:50 +08:00
## Basic usage
2020-08-13 15:18:26 +08:00
Simple step bar.
:::demo Set `active` attribute with `Number` type, which indicates the index of steps and starts from 0. You can set `space` attribute when the width of the step needs to be fixed which accepts `Number` type. The unit of the `space` attribute is `px` . If not set, it is responsive. Setting the `finish-status` attribute can change the state of the steps that have been completed.
2021-09-17 00:18:50 +08:00
steps/basic
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Step bar that contains status
2020-08-13 15:18:26 +08:00
Shows the status of the step for each step.
:::demo Use `title` attribute to set the name of the step, or override the attribute by using a named `slot` . We have listed all the slot names for you at the end of this page.
2021-09-17 00:18:50 +08:00
steps/with-status
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Center
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
Title and description can be centered.
2020-08-13 15:18:26 +08:00
:::demo
2021-09-04 19:29:28 +08:00
2021-09-17 00:18:50 +08:00
steps/centered
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Step bar with description
2020-08-13 15:18:26 +08:00
There is description for each step.
:::demo
2021-09-04 19:29:28 +08:00
2021-09-17 00:18:50 +08:00
steps/with-description
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Step bar with icon
2020-08-13 15:18:26 +08:00
A variety of custom icons can be used in the step bar.
:::demo 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` .
2021-09-17 00:18:50 +08:00
steps/with-icon
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Vertical step bar
2020-08-13 15:18:26 +08:00
Vertical step bars.
2021-09-17 00:18:50 +08:00
:::demo You only need to set the `direction` attribute to `vertical` in the `el-steps` element.
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
steps/vertical
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Simple step bar
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
Simple step bars, where `align-center` , `description` , `direction` and `space` will be ignored.
:::demo
2021-09-17 00:18:50 +08:00
steps/simple
2021-09-04 19:29:28 +08:00
2020-08-13 15:18:26 +08:00
:::
2021-09-17 00:18:50 +08:00
## Steps Attributes
2020-08-13 15:18:26 +08:00
2022-09-10 09:14:31 +08:00
| Name | Description | Type | Accepted Values | Default |
2021-09-04 19:29:28 +08:00
| -------------- | ----------------------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------- |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | number / string | — | — |
| direction | display direction | string | vertical/horizontal | horizontal |
| active | current activation step | number | — | 0 |
| process-status | status of current step | string | wait / process / finish / error / success | process |
| finish-status | status of end step | string | wait / process / finish / error / success | finish |
| align-center | center title and description | boolean | — | false |
| simple | whether to apply simple theme | boolean | - | false |
2020-08-13 15:18:26 +08:00
2021-10-04 08:26:51 +08:00
## Steps Slots
| Name | Description | Subtags |
| ---- | ------------------------- | ------- |
| - | customize default content | Step |
2021-09-17 00:18:50 +08:00
## Step Attributes
2021-09-04 19:29:28 +08:00
2022-09-10 09:14:31 +08:00
| Name | Description | Type | Accepted Values | Default |
2022-08-29 11:23:35 +08:00
| ----------- | ------------------------------------------------------------------------ | --------------------- | ----------------------------------------- | ------- |
| 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 | — |
2020-08-13 15:18:26 +08:00
2021-09-17 00:18:50 +08:00
## Step Slots
2020-08-13 15:18:26 +08:00
2021-09-04 19:29:28 +08:00
| Name | Description |
| ----------- | ---------------- |
| icon | custom icon |
| title | step title |
| description | step description |
