Cards 卡片组

卡片展示，不支持配置初始化接口初始化数据域，所以需要搭配类似像Service这样的，具有配置接口初始化数据域功能的组件，或者手动进行数据域初始化，然后通过source属性，获取数据链中的数据，完成数据展示。

基本用法

这里我们使用手动初始数据域的方式，即配置data属性，进行数据域的初始化。

  1. {
  2.   "type": "page",
  3.   "data": {
  4.     "items": [
  5.       {
  6.         "engine": "Trident",
  7.         "browser": "Internet Explorer 4.0",
  8.         "platform": "Win 95+",
  9.         "version": "4",
  10.         "grade": "X"
  11.       },
  12.       {
  13.         "engine": "Trident",
  14.         "browser": "Internet Explorer 5.0",
  15.         "platform": "Win 95+",
  16.         "version": "5",
  17.         "grade": "C"
  18.       },
  19.       {
  20.         "engine": "Trident",
  21.         "browser": "Internet Explorer 5.5",
  22.         "platform": "Win 95+",
  23.         "version": "5.5",
  24.         "grade": "A"
  25.       },
  26.       {
  27.         "engine": "Trident",
  28.         "browser": "Internet Explorer 6",
  29.         "platform": "Win 98+",
  30.         "version": "6",
  31.         "grade": "A"
  32.       },
  33.       {
  34.         "engine": "Trident",
  35.         "browser": "Internet Explorer 7",
  36.         "platform": "Win XP SP2+",
  37.         "version": "7",
  38.         "grade": "A"
  39.       }
  40.     ]
  41.   },
  42.   "body": {
  43.     "type": "cards",
  44.     "source": "$items",
  45.     "card": {
  46.       "body": [
  47.         {
  48.           "label": "Engine",
  49.           "name": "engine"
  50.         },
  51.         {
  52.           "label": "Browser",
  53.           "name": "browser"
  54.         },
  55.         {
  56.           "name": "version",
  57.           "label": "Version"
  58.         }
  59.       ],
  60.       "actions": [
  61.         {
  62.           "type": "button",
  63.           "level": "link",
  64.           "icon": "fa fa-eye",
  65.           "actionType": "dialog",
  66.           "dialog": {
  67.             "title": "查看详情",
  68.             "body": {
  69.               "type": "form",
  70.               "body": [
  71.                 {
  72.                   "label": "Engine",
  73.                   "name": "engine",
  74.                   "type": "static"
  75.                 },
  77.                 {
  78.                   "name": "browser",
  79.                   "label": "Browser",
  80.                   "type": "static"
  81.                 },
  82.                 {
  83.                   "name": "version",
  84.                   "label": "Version",
  85.                   "type": "static"
  86.                 }
  87.               ]
  88.             }
  89.           }
  90.         }
  91.       ]
  92.     }
  93.   }
  94. }

或者你也可以使用 CRUD 的 card 模式

属性表

属性名 类型 默认值 说明
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 配置卡片信息