mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
c6bed151a5
* feat(website): init viteperss (#3162) * init vitepress * Finish homepage * relayout page * partial finish * update * update use lang * remove font weight; change font size * docs: optimize docs folder structure * reorganize project * fix ssr issue * fix build issues Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> * feat(website) integrate with crowdin (#3218) - Introduce Crowdin CLI - Add script for fetching Crowdin token from env - Add script for local development * fix formatting * update codeblocks (#3249) * feat(docs): update website preview script - Update azure preview build script - Eliminate dead links * bootstrap docs * fix homepage layout issue * fix formating * Finish ToC and codepen integration * reorganized files and fix issue that causes demo unavailable after build * feat(docs): migration documentations (#3283) * feat(docs): migration documentations - Move documentations to docs/ * remove unused files * docs: [popconfirm] migrate document (#3285) * feat(docs): migrate documentation from space.md to upload.md (#3292) - Upload documentations acorrodingly * docs: [date-picker] migrate document (#3289) * docs: [date-picker] migrate document * fix: typo * docs: [slider] migrate document (#3287) * docs: migrate documents (#3290) * docs: migrate-datetime-picker * docs: migrate descriptions * docs: migrate dialog * docs: migrate divider * docs: migrate drawer * docs: migrate drapdown * docs: fix drapdown * docs: migrate empty * docs: migrate form * docs: add scoped for style * docs: simplify toRefs * chore: update doc (#3297) * chore: update doc * chore: update doc * chore: update doc * feat(docs): migrate documentations from infinite-scroll to page-header (#3303) - Update docs accordingly - Update CodePen icon to match style - Update component name to match others * docs: migrate documentions (#3293) migrate list: * image * popover * scrollbar * radio * rate * skeleton * select * select-v2 * reault * progress * pagination * chore: update doc (#3305) Co-authored-by: 0song <0song@gmail.com> * Fix broken pipeline * chore: update demo plugin * website perfection * fix hydration bug * docs: update guide (#3342) * WIP docs * docs: update docs * add dark mode * make dev fetch components from local instead of node_modules Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: 三咲智子 <sxzz@sxzz.moe> * fix(docs): fix codepen code example issue (#3380) * fix(docs): fix codepen code example issue - Add lang="ts" for all example files - Fix codepen import error * revert changes in resource.vue * feat(docs): complete crowdin integration (#3408) * Update mds for preparing the integration script * deprecate old website * update sponsors and even handler for resize * update build script for preview * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * fix preview-build error * update deploy script and some bugs * Fix existing issue * chore(project): add dev preview workflow * chore(project): rename dev to staging * update the size of toc * update staging-preview script * update preview scripts * enable website build for preview * fix build error * final commitment for update the details * remove azure pipeline * move docs ignores into docs and update date Co-authored-by: Kevin <sxzz@sxzz.moe> Co-authored-by: zouhang <zouhang@didiglobal.com> Co-authored-by: msidolphin <msidolphin@outlook.com> Co-authored-by: Aex <spryti@qq.com> Co-authored-by: 0song <82012629+0song@users.noreply.github.com> Co-authored-by: 0song <0song@gmail.com>
103 lines
4.3 KiB
Markdown
103 lines
4.3 KiB
Markdown
# 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.
|
|
|
|
:::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.
|
|
|
|
steps/basic
|
|
|
|
:::
|
|
|
|
## Step bar that contains status
|
|
|
|
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.
|
|
|
|
steps/with-status
|
|
|
|
:::
|
|
|
|
## Center
|
|
|
|
Title and description can be centered.
|
|
|
|
:::demo
|
|
|
|
steps/centered
|
|
|
|
:::
|
|
|
|
## Step bar with description
|
|
|
|
There is description for each step.
|
|
|
|
:::demo
|
|
|
|
steps/with-description
|
|
|
|
:::
|
|
|
|
## Step bar with icon
|
|
|
|
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`.
|
|
|
|
steps/with-icon
|
|
|
|
:::
|
|
|
|
## Vertical step bar
|
|
|
|
Vertical step bars.
|
|
|
|
:::demo You only need to set the `direction` attribute to `vertical` in the `el-steps` element.
|
|
|
|
steps/vertical
|
|
|
|
:::
|
|
|
|
## Simple step bar
|
|
|
|
Simple step bars, where `align-center`, `description`, `direction` and `space` will be ignored.
|
|
|
|
:::demo
|
|
|
|
steps/simple
|
|
|
|
:::
|
|
|
|
## Steps Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
| -------------- | ----------------------------------------------------------------------------- | --------------- | ----------------------------------------- | ---------- |
|
|
| 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 |
|
|
|
|
## Step Attributes
|
|
|
|
| Attribute | Description | Type | Accepted Values | Default |
|
|
| ----------- | ------------------------------------------------------------------------ | ------ | ----------------------------------------- | ------- |
|
|
| title | step title | string | — | — |
|
|
| description | step description | string | — | — |
|
|
| icon | step icon's class name. Icons can be passed via named slot as well | string | — | — |
|
|
| 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 |
|