更新时间:2024-11-15 GMT+08:00
分享

布局容器

布局容器的主要作用是控制其内部元素的排列和布局,确保界面的整洁有序和响应式设计。

在左侧组件区域,选择“布局容器”组件,并拖拽至设计区域,如图1所示。

图1 拖拽布局容器组件到设计区并设置属性

将组件拖拽至布局容器中,根据需求布局,选中组件可配置对应组件属性。

图2 设计布局

基础配置

  • 链接块操作:单击链接块时触发的操作,默认为“打开已发布表单”,可根据需求选择“打开已发布表单”、“打开已发布数据管理页”、“打开已发布自定义页面”或“打开外部链接”。
  • 打开方式:提供了“当前页面打开”、“新页面打开”和“弹窗打开”三种方式,您可根据需求选择。
  • 按钮操作:设置单击触发的动作,默认为“打开已发布表单”,可根据需求选择“打开已发布表单”、“打开已发布数据管理页”、“打开已发布自定义页面”或“打开外部链接”。
  • 选择页面:下拉框中选择已发布表单,当“按钮操作”选择“打开已发布表单”、“打开已发布数据管理页”或“打开已发布自定义页面”时可配置。

    请选择应用内已发布页面作为打开页面,页面停止发布将影响按钮事件

  • “按钮操作”选择““打开外部链接”时,输入以http(s)开头链接地址。
  • 单元格高度:设置容器的单元格高度,以容纳其中最高的内容同时考虑到行间距原则,保持整体的平衡。默认高度为20px。

样式配置

  • 内间距:设置容器内组件与容器四边的间距,可分别配置上、下、左、右或四周。默认值为4px,范围为0~100px。

  • 外间距:设置容器外与其他容器四边的间距,可分别配置上、下、左、右或四周。默认值为0px,范围为0~100px。
  • 边框:
    • 位置:设置边框的位置,支持配置上、下、左、右和四周。
    • 宽度:设置边框的宽度。默认值为0px,范围为0~50px。
    • 样式:设置边框样式,根据需求选择“无”、“圆点”、“虚线”和“实线”。
    • 颜色:设置边框显示的颜色。

  • 圆角:给元素添加圆角效果,设置圆角的大小和位置。

    默认值为0px,范围为0~500px。

  • 背景类型:设置组件样式的背景。
    • “背景类型”选择“颜色”时,选择背景展示的颜色。
    • “背景类型”选择“图片”时,上传图片作为背景,并设置图片的填充方式。

      背景图片支持jpg、jpeg、png、gif格式,单张5MB以内。

      图3 设置背景
  • 阴影:
    • X:X偏移,阴影相对于其源元素在水平方向(X轴)的偏移距离,取值范围[-100, 100]。
    • Y:Y偏移,阴影在垂直方向(Y轴)的偏移距离,取值范围[-100, 100]。
    • 模糊:阴影的模糊程度。值为0时表示阴影边缘锐利,没有模糊。值越大,阴影的边缘就越模糊,从而产生更柔和的阴影效果。取值范围[0, 100]。
    • 扩散:扩散半径,它允许阴影在原始尺寸基础上向外扩散。正值会使阴影扩大,负值则会减小阴影的尺寸。取值范围[-100, 100]。
    • 颜色:设置阴影的颜色。

相关文档