mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-06 22:19:21 +08:00
4.9 KiB
Executable File
4.9 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"]
}
]
}
用作 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
},
"controls": [
{
"type": "static-progress",
"name": "progress",
"label": "进度"
}
]
}
显示背景间隔
{
"type": "page",
"body": {
"type": "progress",
"stripe": true,
"value": 60
}
}
显示动画
需要同时开启显示背景间隔才能看出来
{
"type": "page",
"body": {
"type": "progress",
"stripe": true,
"animate": true,
"value": 60
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
如果在 Table、Card 和 List 中,为"color" ;在 Form 中用作静态展示,为"static-color" |
|
className | string |
外层 CSS 类名 | |
progressClassName | string |
progress-xs progress-striped active m-b-none |
进度调 CSS 类名 |
progressBarClassName | string |
完成进度条 CSS 类名 | |
value | string |
进度值 | |
placeholder | string |
- |
占位文本 |
showLabel | boolean |
true |
是否展示进度文本 |
strip | boolean |
false |
背景是否显示条纹 |
animate | boolean |
false |
背景条纹是否有动画 |
map | Array<string> |
['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success'] |
进度颜色映射 |