1.0 KiB
1.0 KiB
| title | preview |
|---|---|
| Progress 进度 | https://didi.github.io/mand-mobile/examples/#/progress |
进度圆环,用于将数据直观地传达给用户
引入
import { Progress } from 'mand-mobile'
Vue.component(Progress.name, Progress)
代码演示
API
Progress Props
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|---|---|---|---|---|
| value | 进度值 | Number | 0 |
0-1 |
| size | 圆环大小 | Number | 70 |
单位px |
| width | 圆环宽度 | Number | - | 单位px |
| color | 圆环高亮颜色 | String | #fc9153 |
- |
| border-color | 圆环颜色 | String | rgba(0, 0, 0, .1) |
- |
| fill | 圆环内部填充 | String | transparent |
- |
| linecap | 圆环两端形状 | String | round |
round, butt |
| rotate | 圆环旋转 | Number | 0 |
- |
| transition | 进度变化是否使用动效 | Boolean | false |
- |
| duration | 进度变化动效时长 | Number | 1000 |
单位ms |
Progress Slots
default
圆环内部内容插槽,一般用于添加文本
defs
圆环SVG内部的插槽,一般用于添加defs, use元素等