mirror/element-plus
2
0
Fork 0
mirror of https://github.com/element-plus/element-plus.git synced 2025-02-17 11:49:41 +08:00
Code Issues Packages Projects Releases Wiki Activity

docs(components): [progress] (#12604)

Browse Source 
* docs(components): [progress]
This commit is contained in:
btea 2023-04-29 01:25:30 +08:00 committed by GitHub
parent 167582d8b4
commit 1807c9d643
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 62 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

38
docs/en-US/component/progress.md
View File

@ -77,26 +77,28 @@ progress/striped-progress
:::
## Attributes
## API
| Name | Description | Type | Accepted Values | Default |
| -------------- | ------------------------------------------------------------------------------------- | --------------------- | ------------------------- | ------- |
| percentage | percentage, **required** | number | (0-100) | 0 |
| type | the type of progress bar | string | line/circle/dashboard | line |
| stroke-width | the width of progress bar | number | — | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | boolean | — | false |
| status | the current status of progress bar | string | success/exception/warning | — |
| indeterminate | set indeterminate progress | boolean | - | false |
| duration | control the animation duration of indeterminate progress or striped flow progress | number | - | 3 |
| color | background color of progress bar. Overrides `status` prop | string/function/array | — | '' |
| width | the canvas width of circle progress bar | number | — | 126 |
| show-text | whether to show percentage | boolean | — | true |
| stroke-linecap | circle/dashboard type shape at the end path | string | butt/round/square | round |
| format | custom text format | function(percentage) | — | — |
| striped | stripe over the progress bar's color | boolean | — | false |
| striped-flow | get the stripes to flow | boolean | — | false |
### Attributes
## Slots
| Name | Description | Type | Default |
| -------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------- | ------- |
| percentage | percentage, **required** | ^[number]`(0-100)` | 0 |
| type | the type of progress bar | ^[enum]`'line' \| 'circle' \| 'dashboard'` | line |
| stroke-width | the width of progress bar | ^[number] | 6 |
| text-inside | whether to place the percentage inside progress bar, only works when `type` is 'line' | ^[boolean] | false |
| status | the current status of progress bar | ^[enum]`'success' \| 'exception' \| 'warning'` | — |
| indeterminate | set indeterminate progress | ^[boolean] | false |
| duration | control the animation duration of indeterminate progress or striped flow progress | ^[number] | 3 |
| color | background color of progress bar. Overrides `status` prop | ^[string] / ^[function]`(percentage: number) => string` / ^[Array]`{ color: string; percentage: number }[]` | '' |
| width | the canvas width of circle progress bar | ^[number] | 126 |
| show-text | whether to show percentage | ^[boolean] | true |
| stroke-linecap | circle/dashboard type shape at the end path | ^[enum]`'butt' \| 'round' \| 'square'` | round |
| format | custom text format | ^[Function]`(percentage: number) => string` | — |
| striped | stripe over the progress bar's color | ^[boolean] | false |
| striped-flow | get the stripes to flow | ^[boolean] | false |
### Slots
| Name | Description |
| ------- | ------------------------------------------------- |

42
packages/components/progress/src/progress.ts
View File

@ -6,49 +6,82 @@ export type ProgressColor = { color: string; percentage: number }
export type ProgressFn = (percentage: number) => string
export const progressProps = buildProps({
/**
* @description type of progress bar
*/
type: {
type: String,
default: 'line',
values: ['line', 'circle', 'dashboard'],
},
/**
* @description percentage, required
*/
percentage: {
type: Number,
default: 0,
validator: (val: number): boolean => val >= 0 && val <= 100,
},
/**
* @description the current status of progress bar
*/
status: {
type: String,
default: '',
values: ['', 'success', 'exception', 'warning'],
},
/**
* @description set indeterminate progress
*/
indeterminate: {
type: Boolean,
default: false,
},
/**
* @description control the animation duration of indeterminate progress or striped flow progress
*/
duration: {
type: Number,
default: 3,
},
/**
* @description the width of progress bar
*/
strokeWidth: {
type: Number,
default: 6,
},
/**
* @description butt/circle/dashboard type shape at the end path
*/
strokeLinecap: {
type: definePropType<NonNullable<SVGAttributes['stroke-linecap']>>(String),
default: 'round',
},
/**
* @description whether to place the percentage inside progress bar, only works when `type` is 'line'
*/
textInside: {
type: Boolean,
default: false,
},
/**
* @description the canvas width of circle progress bar
*/
width: {
type: Number,
default: 126,
},
/**
* @description whether to show percentage
*/
showText: {
type: Boolean,
default: true,
},
/**
* @description background color of progress bar. Overrides `status` prop
*/
color: {
type: definePropType<string | ProgressColor[] | ProgressFn>([
String,
@ -57,8 +90,17 @@ export const progressProps = buildProps({
]),
default: '',
},
/**
* @description stripe over the progress bar's color
*/
striped: Boolean,
/**
* @description get the stripes to flow
*/
stripedFlow: Boolean,
/**
* @description custom text format
*/
format: {
type: definePropType<ProgressFn>(Function),
default: (percentage: number): string => `${percentage}%`,