文档

Data

更新时间:

简介

Data组件绑定一个数据源对象,在其内部的组件将具有Data组件绑定的数据源对象的上下文,基础组件可使用Data数据源的字段,数据容器组件可使用Data数据源的关联。

image

属性配置

Data组件属性由以下部分组成

分类

属性

示例

说明

基础属性

只读

image

通过设置Data组件为只读状态,可以实现Data组件及其内部拥有只读属性的组件的不可操作状态。

样式

布局方向

image

数据容器组件预定义两种布局方向水平、垂直,详情参见布局方向

内容对齐方式

image

数据容器组件预定义九种内容对齐方式,详情参见内容对齐方式

子组件间距

image

数据容器组件预定义三种子组件间距占比方式,详情参见:子组件间距

禁止压缩子组件

image

数据容器组件允许设置是否压缩子组件。

宽高

image

当数据容器的内容对齐方式设置为“左对齐”或“右对齐”时,数据容器内的子元素的上下外边距(margin-top、margin-bottom)不生效,当数据容器的内容对齐方式设置为“上对齐”或“下对齐”时,数据容器内的子元素的左右外边距(margin-left、margin-right)不生效。

数据容器组件的宽度、间距、边框样式、阴影、透明度、背景颜色属于页面组件通用属性,关于此部分属性的更多信息,请参见样式

间距

image

边框样式

image

阴影

image

透明度

image

背景颜色

image

背景图片

image

数据容器组件允许不选择、选择一个静态图片或动态图片作为背景图片。

背景图片尺寸

image

背景图片展示的方式,请参见背景图片尺寸

背景图片重复

image

属性定义背景图像的重复方式。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复,详情参见请参见背景图片重复

背景图片位置

image

属性为每一个背景图片设置初始位置。这个位置是相对于由数据容器组件边界定义的位置图层,请参见背景图片位置

背景裁剪

image

设置元素的背景(背景图片或颜色)是否延伸到边框、内边距盒子、内容盒子下面,请参见背景裁剪

允许内部容器相对自己浮动

image

数据容器组件允许设置内部元素浮动的参考元素为当前容器。

控制本容器浮动效果

image

数据容器组件预定义四种设置自身的浮动效果。

开启更多尺寸样式

image

是否开启最小宽度、最小高度、最大宽度、最大高度、在父容器布局方向未占满时占据的比例配置。

最小宽度、最小高度、最大宽度、最大高度

image

数据容器组件的宽度属于页面组件通用属性,关于此部分属性的更多信息,请参见样式

在父容器布局方向未满时占据的比例

image

属性规定了数据容器组件在父级容器中分配剩余空间的相对比例。

数据

数据源

image

Data组件数据源样式属于页面组件通用属性,关于该部分属性的更多信息,请参见数据

数据加载时显示loading

image

数据获取时间较长时,可勾选此项,在数据加载完成前页面显示loading图标。

事件

点击

image

数据容器组件可配置点击事件,关于此部分属性的更多信息,请参见事件

条件可见性

条件可见性

image_7c7c81f0cag9

关于此部分属性的更多信息,请参见条件可见性

布局方向

说明

前置条件:数据容器组件放置两个按钮组件

方向

说明

样式

水平

内部元素水平排列。

image

垂直

内部元素垂直排。

image

内容对齐方式

说明

前置条件:数据容器组件放置一个按钮组件。

对齐方式

样式

左上对齐

image

上对齐

image

右上对齐

image

左对齐

image

居中对齐

image

右对齐

image

左下对齐

image

下对齐

image

右下对齐

image

子组件间距

说明

前置条件:数据容器组件放置两个无边距的按钮组件。

间距方式

样式

无间距

image

平分剩余空间

image

间距相等

image

背景图片尺寸

尺寸

样式

说明

原始

image

以背景图片的比例缩放背景图片。

包含

image

缩放背景图片以完全装入背景区,可能背景区部分空白。包含尽可能的缩放背景并保持图像的宽高比例(图像不会被压缩)。该背景图会填充所在的容器。当背景图和容器的大小的不同时,容器的空白区域(上/下或者左/右)会显示由背景颜色设置的背景颜色。

覆盖

image

缩放背景图片以完全覆盖背景区,可能背景图片部分看不见。和「包含」值相反,「覆盖」值尽可能大的缩放背景图像并保持图像的宽高比例(图像不会被压扁)。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时,背景图的左/右或者上/下部分会被裁剪。

填充

image

宽高放大或缩小图片使其完全填充容器。

背景图片重复

类型

样式

说明

不重复

image

图像不会被重复。

水平

image

图像会在水平方向按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪,如果它的大小不合适的话。

垂直

image

图像会在垂直方向按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪,如果它的大小不合适的话。

全部

image

图像会在水平和垂直方向按需重复来覆盖整个背景图片所在的区域。最后一个图像会被裁剪,如果它的大小不合适的话。

背景图片位置

位置

样式

左上

image

左中

image

左下

image

右上

image

右中

image

右下

image

中上

image

居中

image

中下

image

背景裁剪

类型

样式

说明

包含边框

image

背景延伸至边框外沿(但是在边框下层)。

包含内间距

image

背景延伸至「内边距」外沿。不会绘制到边框处。

包含内容区

image

背景被裁剪至内容区外沿。

控制本容器浮动效果

浮动效果

样式

说明

不浮动

image

未开启定位属性。

相对最近的父级容器浮动

image

开启相对定位,相对最近的父级定位容器浮动。

相对窗口浮动

image

开启绝对定位,相对窗口浮动。

相对滚动容器浮动

image

数据容器组件开启粘性浮动,相对滚动容器。

  • 本页导读