区块组件库面板

通过本文你将了解到如何向模拟器中添加区块组件以及搭建器中有哪些区块组件。

内容介绍

区块组件库面板直观地罗列出了所有区块组件，其入口如下图所示。同样地，你可以通过拖拽的方式将区块组件拖入「模拟器画布」中的某个位置上。

区块组件一般由基础组件组合而成，一般一个组件单独占用一行空间。

说明

基础组件：组件库面板中的组件

区块组件：区块组件库面板中的组件

复合组件是由文本和另一部分组合而成的区块组件，它们的排列方式可能是左右排列，也有可能是上下排列。在某种条件下，复合组件的排列方式会进行改变，这就是它的响应式。下面以一个「双列文本」组件为例，帮助你更轻松地理解响应式。

条件（或）	① 在 PC 端且卡片宽度大于 440px	① 在移动端② 在 PC 端且卡片宽度小于 440px
排列方式	左右排列	上下排列
示例

想要开启响应式，需要在卡片创建时为卡片的公有数据添加config对象，并配置config.autoLayout为true，下面分别介绍卡片平台创建卡片实例和开放接口创建卡片实例两种方式如何配置：

为了在创建实例时能为autoLayout配置值，我们需要定义该变量，如图，需要作为config对象的一个字段。

搭建完成后「发布」卡片，进入卡片实例管理页面。

为config配置静态数据，如图所示，其中autoLayout为true。

由于config的值是非字符串类型，因此我们在创建卡片实例时，需要在内置的cardParamMap.sys_full_json_obj字段中添加相关变量，开放接口投放卡片实例后即可看到响应式效果。

{
  "cardData" : {
    "cardParamMap" : {
      "sys_full_json_obj" : "{\"config\":{\"autoLayout\":true}}"
    }
  },
}

此处使用了「文本+下拉框」和「文本+按钮」复合组件进行演示。