mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-10 17:02:18 +08:00
5747d1590d
Co-authored-by: liujintao03 <liujintao03@baidu.com>
6.7 KiB
Executable File
6.7 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Progress 进度条 | 0 | ⚙ 组件 | Progress 进度条 | 60 |
基本用法
{
"type": "page",
"body": {
"type": "progress",
"value": 60
}
}
颜色映射
可以配置map
,指定颜色映射,例如,默认的 map 配置为:['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']
它意味着将进度条分成了 5 份,前20%
将会添加bg-danger
css 类名到进度条上,20%~40%
,将会添加bg-warning
,以此类推,你可以自定义map
来配置想要的进度效果
{
"type": "page",
"body": [
{
"type": "progress",
"value": 40,
"map": ["bg-danger", "bg-success"]
},
{
"type": "divider"
},
{
"type": "progress",
"value": 60,
"map": ["bg-danger", "bg-success"]
},
{
"type": "divider"
},
{
"type": "progress",
"value": 60,
"map": ["bg-danger", "bg-success"],
"mode": "circle"
},
{
"type": "divider"
},
{
"type": "progress",
"value": 10,
"map": ["bg-danger", "bg-success"],
"mode": "circle"
}
]
}
用作 Field 时
当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时,可以设置name
属性,映射同名变量
Table 中的列类型
{
"type": "table",
"data": {
"items": [
{
"id": "1",
"progress": 20
},
{
"id": "2",
"progress": 40
},
{
"id": "3",
"progress": 60
}
]
},
"columns": [
{
"name": "id",
"label": "Id"
},
{
"name": "progress",
"label": "进度",
"type": "progress"
}
]
}
List 的内容、Card 卡片的内容配置同上
Form 中静态展示
{
"type": "form",
"data": {
"progress": 60
},
"body": [
{
"type": "static-progress",
"name": "progress",
"label": "进度"
}
]
}
显示背景间隔
{
"type": "page",
"body": {
"type": "progress",
"stripe": true,
"value": 60
}
}
显示动画
需要条形进度条才生效
{
"type": "page",
"body": [
{
"type": "progress",
"animate": true,
"value": 60
},
{
"type": "divider"
},
{
"type": "progress",
"animate": true,
"value": 60,
"stripe": true
}
]
}
圆形进度条
{
"type": "page",
"body": {
"type": "progress",
"value": 60,
"mode": "circle"
}
}
仪表盘进度条
可设置缺口位置和缺口角度
{
"type": "page",
"body": {
"type": "progress",
"value": 60,
"mode": "dashboard",
"gapDegree": 22,
"gapPosition": "bottom"
}
}
圆形进度条设置线条宽度
可设置 strokeWidth 调整线条宽度
{
"type": "page",
"body": {
"type": "progress",
"value": 60,
"mode": "dashboard",
"strokeWidth": 3
}
}
自定义格式输出内容
{
"type": "page",
"body": {
"type": "progress",
"mode": "circle",
"value": 60,
"valueTpl": "${value}个"
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
如果在 Form 中用作静态展示,为"static-progress" |
|
mode | string |
line |
进度「条」的类型,可选line circle dashboard |
className | string |
外层 CSS 类名 | |
progressClassName | string |
progress-xs progress-striped active m-b-none |
进度条 CSS 类名 |
progressBarClassName | string |
完成进度条 CSS 类名 | |
value | string |
进度值 | |
placeholder | string |
- |
占位文本 |
showLabel | boolean |
true |
是否展示进度文本 |
stripe | boolean |
false |
背景是否显示条纹 |
animate | boolean |
false |
type 为 line,可支持动画 |
map | Array<string> |
['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'] |
进度颜色映射 |
valueTpl | string |
${value}% |
自定义格式化内容 |
strokeWidth | number |
6 |
圆形进度条线宽度 |
gapDegree | number |
75 |
仪表盘缺角角度,可取值 0 ~ 295 |
gapPosition | string |
bottom |
仪表盘进度条缺口位置,可选top bottom left right |