javascript/element-plus
1
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2026-03-13 07:51:17 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [steps] (#11854)

Browse Source 
* Update steps docs with new syntax.
This commit is contained in:
Xc
2023-04-07 14:39:36 +08:00
committed by GitHub
parent e02c4c5605
commit 8f4e8dc1ae
3 changed files with 59 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
docs/en-US/component/steps.md
View File

@@ -77,34 +77,38 @@ steps/simple
:::
## Steps Attributes
## Steps API
| Name | 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 |
### Steps Attributes
## Steps Slots
| Name | Description | Type | Default |
| -------------- | ----------------------------------------------------------------------------- | ---------------------------------------------------------------- | ---------- |
| space | the spacing of each step, will be responsive if omitted. Supports percentage. | ^[number] / ^[string] | '' |
| direction | display direction | ^[enum]`'vertical' \| 'horizontal'` | horizontal |
| active | current activation step | ^[number] | 0 |
| process-status | status of current step | ^[enum]`'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | process |
| finish-status | status of end step | ^[enum]`'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | finish |
| align-center | center title and description | ^[boolean] | — |
| simple | whether to apply simple theme | ^[boolean] | — |
| Name | Description | Subtags |
| ---- | ------------------------- | ------- |
| - | customize default content | Step |
### Steps Slots
## Step Attributes
| Name | Description | Subtags |
| ------- | ------------------------- | ------- |
| default | customize default content | Step |
| 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 API
## Step Slots
### Step Attributes
| Name | Description | Type | 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. | ^[enum]`'' \| 'wait' \| 'process' \| 'finish' \| 'error' \| 'success'` | '' |
### Step Slots
| Name | Description |
| ----------- | ---------------- |

12
packages/components/steps/src/item.ts
View File

@@ -3,17 +3,29 @@ import type Step from './item.vue'
import type { ExtractPropTypes } from 'vue'
export const stepProps = buildProps({
/**
* @description step title
*/
title: {
type: String,
default: '',
},
/**
* @description step custom icon. Icons can be passed via named slot as well
*/
icon: {
type: iconPropType,
},
/**
* @description step description
*/
description: {
type: String,
default: '',
},
/**
* @description current status. It will be automatically set by Steps if not configured.
*/
status: {
type: String,
values: ['', 'wait', 'process', 'finish', 'error', 'success'],

21
packages/components/steps/src/steps.ts
View File

@@ -4,30 +4,51 @@ import type Steps from './steps.vue'
import type { ExtractPropTypes } from 'vue'
export const stepsProps = buildProps({
/**
* @description the spacing of each step, will be responsive if omitted. Supports percentage.
*/
space: {
type: [Number, String],
default: '',
},
/**
* @description current activation step
*/
active: {
type: Number,
default: 0,
},
/**
* @description display direction
*/
direction: {
type: String,
default: 'horizontal',
values: ['horizontal', 'vertical'],
},
/**
* @description center title and description
*/
alignCenter: {
type: Boolean,
},
/**
* @description whether to apply simple theme
*/
simple: {
type: Boolean,
},
/**
* @description status of end step
*/
finishStatus: {
type: String,
values: ['wait', 'process', 'finish', 'error', 'success'],
default: 'finish',
},
/**
* @description status of current step
*/
processStatus: {
type: String,
values: ['wait', 'process', 'finish', 'error', 'success'],