组件

您可在移动可视化编辑页面添加各种组件，配置组件数据源、样式或交互动作，完成应用的多样化设计和功能需求开发。

添加组件

在移动应用编辑器中，单击最左侧的组件图标。
在画布左侧组件列表上方，输入组件名称，找到该组件，然后将组件拖拽到中间画布。
您也可直接在基础组件列表中，找到目标组件，进行添加。
说明
您也可展开组件下拉列表，选择其他类型组件，展开组件列表，添加其他组件。

配置组件

在移动应用编辑器中，选中并配置组件，相关功能项说明如下。

功能项	说明
数据源	与Web可视化开发组件数据源配置方法相同，主要包括设备、接口和静态数据。
样式	通用样式：配置组件名称、宽高和布局位置等，详细内容参见下文的“通用样式”。个性化样式：配置组件本身展示效果。部分个性配置项支持配置数据源，详细内容参见下文的“配置项的数据源”。更多个性配置内容，请参见本产品文档移动可视化开发>组件目录下的各组件文档。
交互	与Web开发组件支持的交互动作相同。具体操作，请参见交互配置。

通用操作

在画布中，选中组件，单击鼠标右键，可执行如下操作：

选择图层：从当前组件所属栏开始，以从上至下的图层顺序显示图层名称。
例如：在某纵向分栏的某栏嵌套横向分栏，然后在横向分栏的某栏添加一个图片组件，则图层列表如下图所示。
剪切：支持在同一应用下，跨页面粘贴剪切的组件。
复制：支持在同一账号下，跨页面和跨应用粘贴复制的组件。

通用样式

下图橙色框中为组件通用样式的配置项。

通用样式

配置项	说明
组件名称	设置组件名称，名称需在应用内具有唯一性。
组件可见性	设置组件是否在页面上显示。若设置为不可见，可配合交互，设置组件功能的使用。
不透明度	设置组件显示的透明度。0%为完全透明，100%为完全不透明。
宽度	设置组件在页面中展示的宽度和高度。说明仅按钮和开关组件不支持此配置。
高度	设置组件在页面中展示的宽度和高度。说明仅按钮和开关组件不支持此配置。
上边距	设置当前组件与相邻组件或所属栏边界的距离。说明组件与所属栏上或下边界的实际距离=所属栏上或下内边距+该组件的上或下外边距。
下边距
左边距
右边距

配置项的数据源

组件样式的部分配置项支持设置动态数据源设备或接口，其中颜色仅支持配置接口。组件会根据配置项的数据源，实时更新组件的显示效果。

不同配置项支持的数据格式不同，数据源返回数据需与要求的数据格式保持一致。

配置项	数据格式
文字级别	字符串。对应的映射关系如下： font-size-display-3：运营标题-大 font-size-display-2：运营标题-中 font-size-display-1：运营标题-小 font-size-headline：标题-大 font-size-title：标题-中 font-size-subhead：标题-小 font-size-body-2：正文-强调 font-size-body-1：正文-常规 font-size-caption：水印文本 font-size-footnote：脚注
字号	单精度数字、双精度数字、整数。
行高	单精度数字、双精度数字、整数。
字重	数值。对应的映射关系如下： 300：细体 400：常规 500：中黑 600：中粗 700：粗体
边框粗细	整数，取值范围为0~100。
边框样式	整数，取值范围为0~2。对应线样式的映射关系为（同下拉列表顺序）： 0：实线 1：虚线 2：点线
颜色	RGB颜色的JSON格式。 `{ "r": 255, "g": 255, "b": 255, "a":0 }` 说明其中a表示颜色透明度，取值范围为0~1。