布局类组件包含容器组件和标签页组件,点击左侧边栏中的“组件”,在“布局”分类下选择希望添加的组件,通过拖拽的方式即可添加到大屏中:
容器组件
容器组件可以将多个组件进行组合,在容器组件进行移动和改变大小时,容器组件内的所有组件会随之进行移动、等比例缩放并保持相对布局的稳定。具体操作时,将待添加至容器内的组件拖拽至容器组件中即可。容器组件的配置项如下:
- 边框:容器边框的样式
- 背景:容器组件的背景设置
- 颜色:组件的背景颜色
- 渐变:是否开启渐变效果,开启后还可选择渐变效果的方向,渐变色与组件的背景颜色相关
- 背景图片:组件的背景图片,可直接选择大屏内置的图片素材作为背景或添加自定义的背景图片,自定义背景图片时支持通过输入图片地址和上传图片两种方式添加,您还可以设置图片重复效果
- 尺寸:容器组件的尺寸,单位为像素
标签页组件
标签页组件将面板划分为多个状态,在各个状态中可以分别添加组件;通过切换标签,可以显示同一面板不同状态下的组件。
具体操作时,先点击标签名,切换标签页组件至不同状态,然后将待添加至对应状态内的组件拖拽至标签页组件中即可。标签页组件的配置项如下:
- 标签页:点击添加按钮可以添加新的标签;对于已添加的标签,可以进行重命名、移除等操作
- 滑动切换:是否支持通过滑动切换当前标签
- 切换按钮:是否显示切换按钮,可通过切换按钮切换当前标签
- 大小:切换按钮的大小
- 字体大小:切换按钮中的切换符号大小
- 字体颜色:切换按钮中的切换符号颜色
- 切换按钮颜色:切换按钮的颜色
- 背景:标签页组件的背景设置
- 颜色:组件的背景颜色
- 渐变:是否开启渐变效果,开启后还可选择渐变效果的方向,渐变色与组件的背景颜色相关
- 背景图片:组件的背景图片,可直接选择大屏内置的图片素材作为背景或添加自定义的背景图片,自定义背景图片时支持通过输入图片地址和上传图片两种方式添加,您还可以设置图片重复效果
- 尺寸:标签页组件的尺寸,单位为像素