Property 属性表

使用表格的方式显示只读信息，如产品详情页。

基本用法

```schema: scope=”body” { “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` 来分隔
```schema: scope="body"
{
  "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 其它渲染组件，比如

```schema: scope=”body” { “type”: “property”, “items”: [ { “label”: “tpl”, “content”: { “type”: “tpl”, “tpl”: “1 Core“ } }, { “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](./service) 来获取数据，下面的例子为了方便就直接放 page 下的 data 中了，它的效果和用 service 是一样的。
动态内容有两种情况：
1. label 固定、content 不同
2. label 和 content 都不确定
第一种情况只需要在 content 里使用变量即可，因为可以用任意 amis 节点。
```schema
{
  "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": {
    "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",
    "source": "${items}"
  }
}

样式控制

通过 labelStyle 和 contentStyle 来控制属性名和属性值的样式，比如水平及垂直方向的对齐方式：

```schema: scope=”body” { “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
D: 1T
E: 2T“ } }, { “label”: “network”, “content”: “4M”, “span”: 2 }, { “label”: “IDC”, “content”: “beijing” }, { “label”: “Note”, “content”: “其它说明”, “span”: 3 } ] }

如果是简易模式，因为合并到一个单元格中了，因此只能通过 `contentStyle` 设置单元格样式，`labelStyle` 只能设置属性名文本的样式。
```schema: scope="body"
{
  "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 列的效果

```schema: scope=”body” { “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 隐藏了：
```schema: scope="body"
{
  "type": "property",
  "items": [
    {
      "label": "cpu",
      "content": "1 core"
    },
    {
      "label": "memory",
      "content": "4G",
      "visibleOn": "data.cpu > 1"
    },
    {
      "label": "network",
      "content": "4M",
      "span": 2
    }
  ]
}

属性表