| 1 | ---
|
| 2 | title: Progress
|
| 3 | preview: https://didi.github.io/mand-mobile/examples/#/progress
|
| 4 | ---
|
| 5 |
|
| 6 | Progress circle, generally used to communicate data intuitively to users
|
| 7 |
|
| 8 | ### Import
|
| 9 |
|
| 10 | ```javascript
|
| 11 | import { Progress } from 'mand-mobile'
|
| 12 |
|
| 13 | Vue.component(Progress.name, Progress)
|
| 14 | ```
|
| 15 |
|
| 16 | ### Code Examples
|
| 17 |
|
| 18 |
|
| 19 | ### API
|
| 20 |
|
| 21 | #### Progress Props
|
| 22 | |Props | Description | Type | Default | Note |
|
| 23 | |----|-----|------|------|------|
|
| 24 | |value|progress value|Number|`0`|`0-1`|
|
| 25 | |size|circle size|Number|`70`|unit `px`|
|
| 26 | |width|circle stroke width|Number|-|unit `px`|
|
| 27 | |color|circle stroke highlight color|String|`#fc9153`|-|
|
| 28 | |border-color|circle stroke color|String|`rgba(0, 0, 0, .1)`|-|
|
| 29 | |fill|circle fill color|String|`transparent`|-|
|
| 30 | |linecap|shape of end|String|`round`|`round`, `butt`|
|
| 31 | |rotate|-|Number|`0`|-|
|
| 32 | |transition|use transition when value changes|Boolean|`false`|-|
|
| 33 | |duration|transition duration|Number|`1000`|unit `ms`|
|
| 34 |
|
| 35 | #### Progress Slots
|
| 36 |
|
| 37 | ##### default
|
| 38 | slot inside circle, generally used to add text
|
| 39 |
|
| 40 | ##### defs
|
| 41 | slot inside circle svg, generally used to add `defs`, `use` elements, etc
|