mirror of
https://gitee.com/baidu/amis.git
synced 2024-12-05 13:38:56 +08:00
10 KiB
Executable File
10 KiB
Executable File
title | description | type | group | menuName | icon | order |
---|---|---|---|---|---|---|
Cards 卡片组 | 0 | ⚙ 组件 | Cards 卡片组 | 32 |
卡片展示,不支持配置初始化接口初始化数据域,所以需要搭配类似像Service
这样的,具有配置接口初始化数据域功能的组件,或者手动进行数据域初始化,然后通过source
属性,获取数据链中的数据,完成数据展示。
基本用法
这里我们使用手动初始数据域的方式,即配置data
属性,进行数据域的初始化。
{
"type": "page",
"data": {
"items": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": "Win 95+",
"version": "5",
"grade": "C"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.5",
"platform": "Win 95+",
"version": "5.5",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 6",
"platform": "Win 98+",
"version": "6",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 7",
"platform": "Win XP SP2+",
"version": "7",
"grade": "A"
}
]
},
"body": {
"type": "cards",
"source": "$items",
"card": {
"body": [
{
"label": "Engine",
"name": "engine"
},
{
"label": "Browser",
"name": "browser"
},
{
"name": "version",
"label": "Version"
}
],
"actions": [
{
"type": "button",
"level": "link",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"title": "查看详情",
"body": {
"type": "form",
"body": [
{
"label": "Engine",
"name": "engine",
"type": "static"
},
{
"name": "browser",
"label": "Browser",
"type": "static"
},
{
"name": "version",
"label": "Version",
"type": "static"
}
]
}
}
}
]
}
}
}
或者你也可以使用 CRUD 的 card 模式
当 cards 在 crud 中且配置了批量操作按钮时可点选
如果配置了 checkOnItemClick
,当用户点击卡片时就能选中这个卡片,而不是只能点击勾选框才能选中
{
"type": "page",
"data": {
"items": [
{
"engine": "Trident",
"browser": "Internet Explorer 4.0",
"platform": "Win 95+",
"version": "4",
"grade": "X"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.0",
"platform": "Win 95+",
"version": "5",
"grade": "C"
},
{
"engine": "Trident",
"browser": "Internet Explorer 5.5",
"platform": "Win 95+",
"version": "5.5",
"grade": "A"
},
{
"engine": "Trident",
"browser": "Internet Explorer 6",
"platform": "Win 98+",
"version": "6",
"grade": "A"
}
]
},
"body": {
"type": "crud",
"mode": "cards",
"checkOnItemClick": true,
"source": "$items",
"bulkActions": [
{
"type": "button",
"label": "查看选中",
"actionType": "dialog",
"dialog": {
"body": "${items|json}"
}
}
],
"card": {
"body": [
{
"label": "Engine",
"name": "engine"
},
{
"label": "Browser",
"name": "browser"
},
{
"name": "version",
"label": "Version"
}
],
"actions": [
{
"type": "button",
"level": "link",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"title": "查看详情",
"body": {
"type": "form",
"body": [
{
"label": "Engine",
"name": "engine",
"type": "static"
},
{
"name": "browser",
"label": "Browser",
"type": "static"
},
{
"name": "version",
"label": "Version",
"type": "static"
}
]
}
}
}
]
}
}
}
属性表
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | string |
"cards" 指定为卡片组。 |
|
title | 模板 | 标题 | |
source | 数据映射 | ${items} |
数据源, 获取当前数据域中的变量 |
placeholder | 模板 | ‘暂无数据’ | 当没数据的时候的文字提示 |
className | string |
外层 CSS 类名 | |
headerClassName | string |
amis-grid-header |
顶部外层 CSS 类名 |
footerClassName | string |
amis-grid-footer |
底部外层 CSS 类名 |
itemClassName | string |
col-sm-4 col-md-3 |
卡片 CSS 类名 |
card | Card | 配置卡片信息 | |
selectable | boolean |
false |
卡片组是否可选 |
multiple | boolean |
true |
卡片组是否为多选 |
checkOnItemClick | boolean |
点选卡片内容是否选中卡片 |