Skip to main content

自定义页面

进阶:布局编辑器

1.整体区域划分概览

1.1 区域1:物料区域

此区域展示了所有组件物料,并按类型分类。开发者自定义的组件也将在此展示,独立在“自定义组件”分类下,方便开发者管理和使用。使用组件物料,只需将其拖拽到画布即可。

1.2 区域2:布局属性编辑区

此区域用于设置布局的全局属性,包括布局使用场景、宽高以及宽高单位。通过设置单位,可以实现自适应布局和固定宽高布局。

  • 宽高:
    • 宽高可以使用像素、百分比、视口等单位。
    • 使用像素单位可以实现固定宽高布局。
    • 使用百分比单位可以实现自适应布局。
    • 使用视口单位可以实现基于浏览器显示大小布局。

画布比例,是为了方便布局排版,可以快速切换画布和布局大小。

1.3 区域3:排版编辑区

  • 此区域分为上下2部分,上面是功能操作按钮,下面是布局排版
  • 功能按钮
    • 撤销
    • 反撤销
    • 组合
      • 选中多个组件,组合成一个Group,可以统一调整大小
    • 拆分
      • 将组合的组件重新拆分
    • 锁定
      • 锁定后页面组件无法拖动
    • 解锁
      • 取消页面锁定状态
    • 清空画布
    • 预览
    • 帮助
      • 平台每个功能,都有单独的帮助文档

1.4 区域4:组件配置区

  • 组件配置分为三大类,查看如何自定义组件属性
  • 样式
  • 属性
  • 事件

1.5 区域5:系统设置区

  • 全屏按钮
  • 帮助中心
  • 切换多语言
  • 账号信息