c9895f8c24
* feat(components): [progress] support set striped progress bar * docs(components): [progress] add `striped` attribute * refactor(components): [progress] update striped prop and `bg-size` style * feat(components): [progress] add `striped-flow` attribute use `striped-flow` to get the stripes to flow * docs(components): [progress] add `striped-flow` attribute add `striped-flow` attribute update `duration` attribute description * docs(components): [progress] refactor `striped-progress` example * refactor(theme-chalk): [progress] refactor striped flow animation
4.5 KiB
title, lang
| title | lang |
|---|---|
| Progress | en-US |
Progress
Progress is used to show the progress of current operation, and inform the user the current status.
Linear progress bar
:::demo Use percentage attribute to set the percentage. It's required and must be between 0-100. You can custom text format by setting format.
progress/linear-progress-bar
:::
Internal percentage
In this case the percentage takes no additional space.
:::demo stroke-width attribute decides the width of progress bar, and use text-inside attribute to put description inside the progress bar.
progress/internal-percentage
:::
Custom color
You can use color attr to set the progress bar color. it accepts color string, function, or array.
:::demo
progress/custom-color
:::
Circular progress bar
:::demo You can specify type attribute to circle to use circular progress bar, and use width attribute to change the size of circle.
progress/circular-progress-bar
:::
Dashboard progress bar
You also can specify type attribute to dashboard to use dashboard progress bar.
:::demo
progress/dashboard-progress-bar
:::
Customized content
:::demo Use default slot to add customized content.
progress/customized-content
:::
Indeterminate progress
:::demo Use indeterminate attribute to set indeterminate progress, with duration to control the animation duration.
progress/indeterminate-progress
:::
Striped progress
:::demo Use striped attribute to set striped progress. You can use striped-flow to get the stripes to flow, with duration to control the animation duration.
progress/striped-progress
:::
Attributes
| 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 |
Slots
| Name | Description |
|---|---|
| default | Customized content, parameter is { percentage } |