mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-11 01:23:22 +08:00
8.1 KiB
8.1 KiB
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Property 属性表 | 0 | ⚙ 组件 | Property 属性表 | 60 |
使用表格的方式显示只读信息,如产品详情页。
基本用法
{
"type": "property",
"title": "机器配置",
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": "80G"
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "Note",
"content": "其它说明",
"span": 3
}
]
}
简易模式
默认是表格模式,还可以通过 "mode"="simple"
改成简易模式,在这种模式下没有边框,属性名和值是通过 separator
来分隔
{
"type": "property",
"mode": "simple",
"separator": ":",
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": "80G"
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "Note",
"content": "其它说明",
"span": 3
}
]
}
使用其它展现
label
和 content
均支持使用 amis
其它渲染组件,比如
{
"type": "property",
"items": [
{
"label": "tpl",
"content": {
"type": "tpl",
"tpl": "1 <b>Core</b>"
}
},
{
"label": "icon",
"content": {
"type": "icon",
"icon": "microchip"
}
},
{
"label": "图片",
"content": {
"type": "image",
"src": "https://internal-amis-res.cdn.bcebos.com/images/2020-1/1578395692722/4f3cb4202335.jpeg@s_0,w_216,l_1,f_jpg,q_80"
}
}
]
}
动态内容
属性表本身没有数据获取功能,需要结合 service 来获取数据,下面的例子为了方便就直接放 page 下的 data 中了,它的效果和用 service 是一样的。
动态内容有两种情况:
- label 固定、content 不同
- label 和 content 都不确定
第一种情况只需要在 content 里使用变量即可,因为可以用任意 amis 节点。
{
"type": "page",
"data": {
"cpu": "1 core",
"memory": "4G",
"disk": "80G"
},
"body": {
"type": "property",
"items": [
{
"label": "cpu",
"content": "${cpu}"
},
{
"label": "memory",
"content": "${memory}"
},
{
"label": "disk",
"content": "${disk}"
}
]
}
}
第二种情况需要使用 source
属性来获取上下文中的内容。
{
"type": "page",
"data": {
"title": "title1",
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": "80G"
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "Note",
"content": "其它说明",
"span": 3
}
]
},
"body": {
"type": "property",
"title": "${title}",
"source": "${items}"
}
}
样式控制
通过 labelStyle
和 contentStyle
来控制属性名和属性值的样式,比如水平及垂直方向的对齐方式:
{
"type": "property",
"labelStyle": {
"textAlign": "left",
"verticalAlign": "top"
},
"contentStyle": {
"verticalAlign": "top"
},
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": {
"type": "tpl",
"tpl": "C: 80G<br/>D: 1T<br/>E: 2T</pre>"
}
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "Note",
"content": "其它说明",
"span": 3
}
]
}
如果是简易模式,因为合并到一个单元格中了,因此只能通过 contentStyle
设置单元格样式,labelStyle
只能设置属性名文本的样式。
{
"type": "property",
"mode": "simple",
"labelStyle": {
"fontWeight": "bold",
"textTransform": "capitalize"
},
"contentStyle": {
"verticalAlign": "top"
},
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": {
"type": "tpl",
"tpl": "C: 80G<br/>D: 1T<br/>E: 2T</pre>"
}
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "Note",
"content": "其它说明",
"span": 3
}
]
}
显示列数
通过 column
来控制一行显示几列,默认是 3 列,下面示例是改成 2 列的效果
{
"type": "property",
"column": 2,
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G"
},
{
"label": "disk",
"content": "80G"
},
{
"label": "IDC",
"content": "beijing"
},
{
"label": "network",
"content": "4M",
"span": 2
},
{
"label": "Note",
"content": "其它说明",
"span": 2
}
]
}
隐藏某个属性值
items 里的属性还支持 visibleOn
和 hiddenOn
表达式,能隐藏部分属性,如果有空间后续组件会自动补上来,如下示例的 memory 隐藏了:
{
"type": "property",
"items": [
{
"label": "cpu",
"content": "1 core"
},
{
"label": "memory",
"content": "4G",
"visibleOn": "data.cpu > 1"
},
{
"label": "network",
"content": "4M",
"span": 2
}
]
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
className | string |
外层 dom 的类名 | |
style | object |
外层 dom 的样式 | |
labelStyle | object |
属性名的样式 | |
contentStyle | object |
属性值的样式 | |
column | number |
3 | 每行几列 |
mode | string |
'table' | 显示模式,目前只有 'table' 和 'simple' |
separator | string |
',' | 'simple' 模式下属性名和值之间的分隔符 |
title | string |
标题 | |
source | string |
数据源 | |
items[].label | SchemaTpl |
属性名 | |
items[].content | SchemaTpl |
属性值 | |
items[].span | SchemaTpl |
属性值跨几列 | |
items[].visibleOn | 表达式 | 显示表达式 | |
items[].hiddenOn | 表达式 | 隐藏表达式 |