全部产品

组件

更新时间:2020-10-28 16:49:12

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

添加组件

  1. 在移动应用编辑器中,单击最左侧的组件图标组件

  2. 在画布左侧组件列表上方,输入组件名称,找到该组件,然后将组件拖拽到中间画布。

    您也可直接在基础组件列表中,找到目标组件,进行添加。

    说明

    您也可展开组件下拉列表,选择其他类型组件,展开组件列表,添加其他组件。

    文字

配置组件

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

功能项

说明

数据源

与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。