0.0.2 • Published 4 years ago
@farris/ui-progress v0.0.2
Progress 进度条
API
各类型通用的属性。
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[type] | 类型 | 'line' | 'circle' | 'dashboard' | 'line' |
[format] | 内容的模板函数 | (percent: number) => string | percent => percent + '%' |
[percent] | 百分比 | number | 0 |
[showInfo] | 是否显示进度数值或状态图标 | boolean | true |
[status] | 状态 | 'success' | 'error' | 'active' | 'normal' | - |
[strokeLinecap] | 进度条端点形状 | 'round' | 'square' | 'round' |
[strokeColor] | 进度条颜色，传入对象时为渐变 | string | { from: string; to: string: direction: string; [percent: string]: string } | - |
[successPercent] | 已完成的分段百分比 | number | 0 |
[size] | 进度条尺寸 | 'default' | 'small' | 'default' |
type为line
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[strokeWidth] | 进度条线的宽度，单位 px | number | 8 |
type为circle
| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
[width] | 圆形进度条画布宽度，单位 px | number | 80 |
[strokeWidth] | 圆形进度条宽度，单位是进度条画布宽度的百分比 | number | 6 |
type为dashboard
| 属性 | 说明 | 类型 | 默认值 | |
|---|---|---|---|---|
[width] | 仪表盘进度条画布宽度，单位 px | number | 80 | |
[strokeWidth] | 圆形进度条宽度，单位是进度条画布宽度的百分比 | number | 6 | |
[gapDegree] | 仪表盘进度条缺口角度，可取值 0 ~ 360 | number | 0 | ✅ |
[gapPosition] | 仪表盘进度条缺口位置 | 'top' | 'right' | 'bottom' | 'left' | 'top' | ✅ |