页面组件通用属性有哪些_多端低代码开发平台魔笔(Mobi)-阿里云帮助中心

简介

本文介绍页面编辑器中组件公共的属性。有关各组件属性的完整列表，请查看相关组件文档。

属性配置

样式

宽度

组件宽度可以以百分比、像素值、rem、视口宽度和自适应五个维度进行设置。

属性设置器	使用说明/效果展示
	百分比组件宽度占据外层容器的百分比。像素值组件宽度像素值（单位px）。 rem 组件宽度rem值。3.75rem为一个屏幕宽度。视口宽度浏览器可视区域中，组件宽度占比（单位vw），1vw等于视口宽度的1%。自适应组件宽度设置为auto，宽度由浏览器自动计算。

高度

组件高度可以以百分比、像素值、rem、视口高度和自适应五个维度进行设置：

属性设置器	使用说明/效果展示
	百分比组件高度占据外层容器的百分比。像素值组件高度像素值（单位px）。 rem 组件高度rem值。3.75rem为一个屏幕宽度。视口高度浏览器可视区域中，组件高度占比（单位vh），1vh等于视口高度的1%。自适应组件高度设置为auto，高度由浏览器自动计算。

颜色

很多基础组件支持自定义颜色设置。颜色设置面板支持两种设置方法。

属性设置器

使用说明/效果展示

系统默认颜色选择。
HEX 编码设置。

间距

组件间距支持内间距设置和外间距设置（当容器组件的内容对齐方式设置为“左对齐”或“右对齐”时，容器组件内的子元素的上下外边距（margin-top、margin-bottom）不生效）。

属性设置器	使用说明/效果展示
	内间距支持上、下、左、右四个方向设置padding，单位支持像素值和rem。3.75rem为一个屏幕宽度。外间距支持上、下、左、右四个方向设置margin，单位支持像素值和rem。3.75rem为一个屏幕宽度。

边框样式

边框样式支持设置不显示、实线、虚线和圆点，设置非不显示样式时，还支持配置边框粗细（单位px）和边框颜色。

属性设置器	使用说明/效果展示
	无边框
	无边框
	添加实线边框
	添加虚线边框
	添加圆点边框

圆角

拖动圆点可以设置组件圆角（单位px）。

属性设置器	使用说明/效果展示
	拖动圆点，从左至右圆角弧度变大。

阴影

组件支持开启阴影选项，可以给组件添加阴影效果。相当于设置属性box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 10%)。

属性设置器	使用说明/效果展示
	关闭开关，关闭阴影效果

	打开开关，打开阴影效果

透明度

组件支持透明度设置，可设置范围在 0 到 1 之间，默认值为1。

属性设置器	使用说明/效果展示
	0代表透明： 1代表不透明：

数据

绑定数据源

部分页面组件需要展示实体对象或实体对象列表的数据。通过绑定数据源，组件本身或其内部组件可以获得相应的数据进行展示。

绑定实体对象
支持绑定返回实体对象的数据源，包括上下文或逻辑流：
- 上下文
  - 根数据容器的上下文数据源可以选择一个实体，表示通过“页面跳转时携带的参数”获取实体对象，如果参数不存在，会新建一个实体对象。
  - 子数据容器的上下文数据源可以选择任意父级数据容器绑定的实体对象的对一关联，表示通过“关联”获取实体对象。
- 逻辑流
  逻辑流数据源可以选择一条逻辑流获取实体对象。
绑定实体对象列表
支持绑定返回实体对象列表的数据源，包括上下文、数据库或逻辑流数据源：
- 上下文
上下文数据源可以选择任意父级数据容器绑定的实体对象的对多关联，表示通过“关联”获取实体对象列表。
数据库
数据库数据源可以选择实体，表示从数据库中获取该实体的实体对象列表。
- 筛选条件：选择实体后，可以对选择实体的数据列表进行筛选，可以选择实体的某个字段进行筛选，筛选条件包括：是、不是、包含、不包含、开头以、结束以、空值。对比值可输入字符串或使用外面任一层数据容器绑定的实体对象的字段。
- 筛选范围：筛选范围可以为所有或自定义，选择自定义时可以设置筛选范围的起始位置和查询条数，从而实现指定范围内的待展示数组筛选。
- 排序：可以选择某一个字段，按照升序或降序的方式对待展示数组进行排序。
逻辑流
逻辑流数据源可以选择一条逻辑流获取实体对象列表。
绑定数据源后，会生成一个默认的“数据别名”，此数据别名会作为子组件选择父级对象时的标签，可根据业务自行修改，要求页面内唯一。
绑定数据源后，可以选择一键填充组件，按照实体字段对组件内部进行自动生成，同时可以开启数据加载显示Loading和仅初始化加载功能。

绑定实体对象字段

当页面组件需要绑定实体对象字段时，可以选择组件本身或任意父级数据容器的“数据源”对应的实体对象的某个字段。

事件

事件属性如下图所示：

组件在某些条件下可以触发特定的事件，具体包括：

事件	说明
无	不调用任何事件。
内部跳转	跳转到已有页面。可传递组件本身或任意父级数据容器的“数据源”对应的实体对象至下一个页面。对于移动端，若目标页面为Tabbar页面，只可使用switchTab方式跳转，若目标页面是普通页面，可选择navigateTo和redirectTo两种跳转方式，navigateTo会在下一层页面打开，redirectTo会在当前层页面打开。
外部链接	跳转到外部链接指向的页面。对于Web端，可选择是否在新窗口中打开；对于移动端，可选择navigateTo和redirectTo两种跳转方式，navigateTo会在下一层页面打开，redirectTo会在当前层页面打开。
关闭页面	关闭当前页面。对于Web端，仅针对弹层页面；对于移动端，会返回上一层页面。
保存数据	提交数据（外层数据容器保存数据时，会同时保存其内部所有关联数据）。
返回前页面	关闭页面，并返回前一个页面。（建议使用此事件来替换 "取消保存" 事件）
取消保存	关闭页面，并返回前一个页面。
删除数据	删除数据。
调用前端逻辑流	调用一条前端逻辑流，详情请参考编排逻辑流。
调用后端逻辑流	调用一条后端逻辑流，详情请参考编排逻辑流。
调用工作流	调用已有的工作流，详情请参考编排工作流。
完成用户任务	完成工作流的用户任务，详情请参考编排工作流。
展示用户任务页面	跳转到当前工作流绑定的用户页面，详情请参考编排工作流。

逻辑流参数展示

在页面组件绑定了“调用前端逻辑流”或“调用后端逻辑流”事件后，属性设计器上将展现逻辑流接受参数的简要信息。

在鼠标 hover 到接受参数区域时，将进一步展现“页面传入参数”和“逻辑流接受参数”等信息。其中页面传入参数，由当前组件上层的数据容器所绑定的数据源决定。

在“页面传入参数”和“逻辑流接受参数”不匹配时将展示错误，与错误检查规则保持一致。

条件可见

条件可见性属性如下图所示：

配置数据源的数据容器中的组件可以开启条件设置，通过设置条件表达式的执行结果为true或 false来控制该组件的显隐状态。表达式中可以使用$currentObject关键字及任意父级数据容器配置的“数据别名”，从而使用对应的实体对象，依照语法提示使用数据源实体的某个属性。