mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
8.0 KiB
Executable File
8.0 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Status 状态 | 0 | ⚙ 组件 | Status | 65 |
基本用法
它最适合的用法是放在列表类组件(CRUD,Table,List 等)的列中,用来表示状态。
{
"type": "status",
"value": 1
}
默认状态列表
下表是默认支持的几种状态:
{
"type": "table",
"data": {
"items": [
{
"label": "-",
"value": "0",
"icon": "fail",
"status": 0
},
{
"label": "-",
"value": "1",
"icon": "success",
"status": 1
},
{
"label": "成功",
"value": "success",
"icon": "success",
"status": "success"
},
{
"label": "运行中",
"value": "pending",
"icon": "rolling",
"status": "pending"
},
{
"label": "排队中",
"value": "queue",
"icon": "warning",
"status": "queue"
},
{
"label": "调度中",
"value": "schedule",
"icon": "schedule",
"status": "schedule"
},
{
"label": "失败",
"value": "fail",
"icon": "fail",
"status": "fail"
}
]
},
"columns": [
{
"name": "value",
"label": "默认value值"
},
{
"name": "label",
"label": "默认label"
},
{
"name": "icon",
"label": "默认icon值"
},
{
"name": "status",
"label": "状态",
"type": "mapping",
"map": {
"*": {
"type": "status"
}
}
}
]
}
自定义状态图标、文本、颜色
2.8.0 及 以上版本
如果默认提供的状态无法满足业务需求,可使用source
自定义状态, 如下:
{
"type": "status",
"source": {
"normal": {
"label": "正常",
"icon": "fa fa-times-circle",
"color": "#000"
},
"unusual": {
"label": "异常",
"icon": "fa fa-times-circle",
"color": "#f00"
}
},
"value": "normal"
}
source
配置类似于mapping
映射,不同的key
值匹配渲染不同状态,支持以下属性:
属性名 | 类型 | 说明 |
---|---|---|
label | string |
显示文本 |
icon | string |
图标, 例如fa fa-plus |
color | string |
状态颜色 |
className | string |
状态的 独立 CSS 类名 |
注意:自定义状态会和默认状态合并。
{
"type": "page",
"body": [
{
"type": "status",
"source": {
"0": {
"label": "正常",
"icon": "fa fa-times-circle",
"color": "#000"
},
"1": {
"label": "异常",
"icon": "fa fa-times-circle",
"color": "#f00"
}
},
"value": 0
}
]
}
source
属性也支持数据映射,通过变量获取上下文中的变量
{
"type": "page",
"data": {
"mysource": {
"0": {
"label": "正常",
"icon": "fa fa-times-circle",
"color": "#000"
},
"1": {
"label": "异常",
"icon": "fa fa-times-circle",
"color": "#f00"
}
}
},
"body": [
{
"type": "status",
"source": "${mysource}",
"className": "mr-4",
"value": 0
},
{
"type": "status",
"source": "${mysource}",
"value": 1
}
]
}
自定义状态图标和文本
推荐使用新属性
source
配置
如果默认提供的状态无法满足业务需求,可以使用
map
和labelMap
属性分别配置状态组件的图标和展示文案。用户自定义的map
和labelMap
会和默认属性进行 merge,如果只需要修改某一项配置时,无需全量覆盖。
{
"type": "page",
"body": [
{
"type": "status",
"map": {
"0": "fa fa-check-circle",
"1": "fa fa-times-circle"
},
"labelMap": {
"0": "正常",
"1": "异常"
},
"value": 0,
"className": "mr-3"
},
{
"type": "status",
"map": {
"0": "fas fa-check-circle",
"1": "fas fa-times-circle"
},
"labelMap": {
"0": "正常",
"1": "异常"
},
"value": 1
}
]
}
动态数据
推荐使用新属性
source
配置
2.3.0 及以上版本
map
和 labelMap
支持配置变量,通过数据映射获取上下文中的变量。
{
"type": "page",
"data": {
"statusLabel": {
"success": "任务成功",
"warning": "已停机"
},
"statusIcon": {
"waiting": "far fa-clock",
"warning": "fas fa-exclamation"
}
},
"body": {
"type": "table",
"data": {
"items": [
{
"id": "1",
"name": "Task1",
"status": "success"
},
{
"id": "2",
"name": "Task2",
"status": "processing",
},
{
"id": "3",
"name": "Task3",
"status": "waiting",
},
{
"id": "4",
"name": "Task4",
"status": "warning",
},
{
"id": "5",
"name": "Task5",
"status": "fail",
}
]
},
"columns": [
{
"name": "id",
"label": "ID"
},
{
"name": "name",
"label": "Name"
},
{
"name": "status",
"label": "状态",
"type": "mapping",
"map": {
"*": {
"type": "status",
"map": {
"processing": "rolling",
"waiting": "${statusIcon.waiting}",
"warning": "${statusIcon.warning}"
},
"labelMap": {
"success": "${statusLabel.success}",
"processing": "处理中",
"waiting": "等待中",
"warning": "${statusLabel.warning}"
}
}
}
}
]
}
}
属性表
属性名 | 类型 | 默认值 | 版本 | 说明 |
---|---|---|---|---|
type | string |
"status" 指定为 Status 渲染器 |
||
className | string |
外层 Dom 的 CSS 类名 | ||
placeholder | string |
- |
占位文本 | |
map | object |
2.3.0 | 映射图标 | |
labelMap | object |
2.3.0 | 映射文本 | |
source | object |
2.8.0 | 自定义映射状态,支持数据映射 | |
source.label | string |
2.8.0 | 映射文本 | |
source.icon | string |
2.8.0 | 映射图标 | |
source.color | string |
2.8.0 | 映射状态颜色 | |
source.className | string |
2.8.0 | 映射状态的 独立 CSS 类名 |