布局块

# 布局块ID

布局块作为功能组件的外层容器,我们为其DOM根节点定义了唯一ID,使用此ID,可以通过JS或JQuery对其进行一些DOM操作,例如显示隐藏等等。

布局块

# 自定义Class

与布局块ID同理,我们可以为布局块的DOM根节点定义Class名,方便我们对器进行DOM操作

# 布局块名称

可以通过给布局块设置名称来方便管理页面中的大量组件,设置的布局块名称也会在层级结构树中对应组件中显示。

布局块

# 允许拖拽(锁定、解锁)

当我们不需要对某个组件进行拖拽操作,可以将其布局块中【允许拖拽】的配置关闭(也叫锁定),锁定后的布局块将无法使用鼠标进行拖拽或尺寸调整,但仍可以通过键盘方向键进行位置移动。 我们也可以在组件右键菜单上点击【锁定】或【解锁】来达到同样的效果。

布局块

# 快捷定位

快捷定位可以对某个布局块进行基于当前画布的定位设置,目前快捷定位支持:水平居中、垂直居中、水平垂直居中。

# 快捷尺寸

快捷尺寸可以对某个布局块进行尺寸的快速设置,目前快捷尺寸支持:宽度铺满、高度铺满、全屏铺满。

# 层级

DataSoli中,组件的层级由外层容器(布局块)的zIndex决定,拖入画布的组件,其布局块的层级默认设置为2,当两个组件的层级为2,我们想要将其中一个组件设置在另一个组件之上,可以将其层级设置为3. 当我们需要让某个组件始终显示在最顶层,可以在组件的右键菜单中,点击【置顶】,置顶操作会遍历当前画布中所有布局块中最大的层级值,然后在其之上加一作为当前被置顶布局块的层级。

# 是否显示(显示、隐藏)

当组件不需要在画布中显示时,可以将【是否显示】关闭,或者在组件右键菜单中选择【隐藏】。 被隐藏的组件,可以在层级结构树中将其回归显示

布局块

也可以点击以下按钮来将隐藏状态恢复到显示状态

# 鼠标事件穿透

当我们需要将某个组件置于其他组件上层显示,却又希望鼠标操作(例如点击)操作的是下层组件时,就可以在上层组件的布局块中打开【鼠标事件穿透】。 例如:我们可能需要在整个页面最上层放一个半透明的图片,而又不想这个图片遮挡住我们鼠标对下层组件的操作,那么就可以给这个图片组件的布局块开启鼠标事件穿透。

# 多选排列布局

多选多个组件后会调出【布局块排列布局】配置区域,具体如何多选组件可以查看设计器中的快捷键 其中我们可以对所选的组件进行快速排列,目前支持的排列有:左对齐、右对齐、顶部对齐、底部对齐、水平居中对齐、垂直居中对齐。

# 单独显示图层

当画布中显示的组件较多时,我们需要对一个或多个组件进行编辑配置,可以选中需要编辑配置的组件,然后右键菜单点击【单独显示图层】,此时会隐藏所有未被选中的组件

布局块

# 拆分布局块

当我们需要将画布中某个布局块拆分成多个时,可以在组件右键菜单上选择【拆分布局块】,具体可选择【横向拆分】或【纵向拆分】

布局块

# 组合

多选多个组件,在其中某个组件上调出右键菜单,选择【成组】,可以将被选中的组件进行组合,在组合上右键菜单选择【取消组合】可以将组合打散。

提示

目前DataSoli中不支持嵌套成组

# 如何编辑组内的组件

在组上双击,或者右键菜单中选择【打开编辑状态】,即可选中组内组件进行配置编辑

# 将组件加入现有组合

当画布中存在组合时,如果我们需要将某些未被成组的组件加入其中某个组合时,可以单选或多选未被成组的组件,右键菜单选择【加入组合】,然后选择需要加入的目标组合即可

# 如何将组合内的组件移出组合

打开组合的编辑状态,然后在需要移出的组件上右键菜单选择【移出组合】即可

# 收藏组件

在进行收藏组件操作前,我们要确保在【管理工作台】-【收藏组件管理】中添加分组,画布中选中某个组件,右键菜单选择【收藏】,

布局块

填写【所属分组】和【收藏名称】(必填项)【备注】(可选项)

布局块

如果没有分组,需要在【我的收藏】→【组件管理】→【+新建分组】

布局块

# 组件的复制与跨页复制

# 当前页内复制

在画布中选中一个或多个组件,右键菜单选择【复制】即可完成。

# 跨页复制

跨页复制只支持单个组件的复制,因此我们选中某个组件,右键菜单选择【复制至剪切板】

布局块

然后切换页面,再画布上右键选择粘贴剪切板中的组件,目前有【不携带位置信息】和【携带位置信息】两个可选项。

注意

【不携带位置信息】有bug并不会复制到当前页面【携带位置信息】可将原页面组件按原画布位置摆放到当前画布

布局块
最近更新日期: 10/13/2023, 1:41:14 PM