Color 颜色

用于展示颜色

基本用法

  1. {
  2.     "type": "page",
  3.     "body": {
  4.         "type": "color",
  5.         "value": "#108cee"
  6.     }
  7. }

用作 Field 时

当用在 Table 的列配置 Column、List 的内容、Card 卡片的内容和表单的 Static-XXX 中时，可以设置name属性，映射同名变量

Table 中的列类型

```schema: scope=”body” { “type”: “table”, “data”: { “items”: [ { “id”: “1”, “color”: “#108cee” }, { “id”: “2”, “color”: “#f38900” }, { “id”: “3”, “color”: “#04c1ba” } ] }, “columns”: [ { “name”: “id”, “label”: “Id” },

  1.     {
  2.         "name": "color",
  3.         "label": "颜色",
  4.         "type": "color"
  5.     }
  6. ]

}

  2. List 的内容、Card 卡片的内容配置同上
  4. ### Form 中静态展示
  6. ```schema: scope="body"
  7. {
  8.     "type": "form",
  9.     "data": {
  10.         "color": "#108cee"
  11.     },
  12.     "body": [
  13.         {
  14.             "type": "static-color",
  15.             "name": "color",
  16.             "label": "颜色"
  17.         }
  18.     ]
  19. }

属性表

属性名 类型 默认值 说明
type string 如果在 Table、Card 和 List 中，为"color"；在 Form 中用作静态展示，为"static-color"
className string 外层 CSS 类名
value string 显示的颜色值
name string 在其他组件中，时，用作变量映射
defaultColor string #ccc 默认颜色值
showValue boolean true 是否显示右边的颜色值