amis/property.md at 9fd1ad897295e45d86aa1f788f452d6dcb8af011

test/amis

mirror of https://gitee.com/baidu/amis.git synced 2024-12-12 11:55:21 +08:00

* feat：属性表组件

* 换一下实现方式，避免右侧有一像素空隙

* 简易模式不显示外边框

* 补充文档

* 属性表的内容支持 visibleOn 表达式

* 支持设置 title

2021-03-26 11:59:42 +08:00

8.0 KiB

Raw Blame History

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": {
    "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 来控制属性名和属性值的样式，比如水平及垂直方向的对齐方式：

{
  "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' 模式下属性名和值之间的分隔符
items[].label	`SchemaTpl`		属性名
items[].content	`SchemaTpl`		属性值
items[].span	`SchemaTpl`		属性值跨几列
items[].visibleOn	表达式		显示表达式
items[].hiddenOn	表达式		隐藏表达式
items[].span	`SchemaTpl`		属性值跨几列

8.0 KiB Raw Blame History Unescape Escape