127 lines
4.1 KiB
Markdown
127 lines
4.1 KiB
Markdown
|
---
|
|||
|
|
title: Progress 进度条
|
|||
|
|
description:
|
|||
|
|
type: 0
|
|||
|
|
group: ⚙ 组件
|
|||
|
|
menuName: Progress 进度条
|
|||
|
|
icon:
|
|||
|
|
order: 60
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
## 基本用法
|
|||
|
|
|
|||
|
|
```schema:height="300"
|
|||
|
|
{
|
|||
|
|
"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`来配置想要的进度效果
|
|||
|
|
|
|||
|
|
```schema:height="200"
|
|||
|
|
{
|
|||
|
|
"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 中的列类型
|
|||
|
|
|
|||
|
|
```schema:height="300" scope="body"
|
|||
|
|
{
|
|||
|
|
"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 中静态展示
|
|||
|
|
|
|||
|
|
```schema:height="300" scope="body"
|
|||
|
|
{
|
|||
|
|
"type": "form",
|
|||
|
|
"data": {
|
|||
|
|
"progress": 60
|
|||
|
|
},
|
|||
|
|
"controls": [
|
|||
|
|
{
|
|||
|
|
"type": "static-progress",
|
|||
|
|
"name": "progress",
|
|||
|
|
"label": "进度"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 属性表
|
|||
|
|
|
|||
|
|
| 属性名 | 类型 | 默认值 | 说明 |
|
|||
|
|
| -------------------- | --------------- | -------------------------------------------------------------------- | -------------------------------------------------------------------------------------- |
|
|||
|
|
| 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` | 是否展示进度文本 |
|
|||
|
|
| map | `Array<string>` | `['bg-danger', 'bg-warning', 'bg-info', 'bg-success', 'bg-success']` | 进度颜色映射 |
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|