响应式栅格大屏3.0+

响应式栅格大屏引入栅格系统的概念，提供了一套响应式、移动设备优先的流式栅格系统。通过内置的栅格布局组件，将每行最多分为 24 列，通过调整不同设备的下的尺寸，达到一个大屏能够兼容多个终端目的。

栅格布局组件

1. 添加栅格容器组件： 将容器组件直接从组件列表拖拽到画布中。注： 响应式栅格大屏中，非栅格容器的组件必须包含在栅格容器中。

2. 添加非栅格容器组件： 非栅格容器组件直接拖拽到画布中时，默认包含在一列容器中。

画布及工具栏操作

1. 行操作

• 添加行： 从左侧栅格布局中拖拽容器到画布。

• 复制行： 选中行，点击工具栏常规下的复制按钮，然后点击粘贴按钮即可。也可直接使用 Ctrl + C、Ctrl + V 快捷键。

• 删除行： 选中行，点击工具栏常规下的删除按钮。也可直接使用Delete快捷键。

• 改变行高度： 选中行，拖拽行下侧手柄，即可改变行内列组件的高度。

• 行内添加列 选中行，通过工具栏中常规下的添加列，即可在行内添加一列。

2. 列操作

• 复制列： 选中列，点击工具栏常规下的复制按钮，然后点击粘贴按钮即可。也可直接使用 Ctrl + C、Ctrl + V 快捷键。

• 删除列： 选中行，点击工具栏常规下的删除按钮。也可直接使用Delete快捷键。

• 改变列数及列偏移： 选中列，拖拽左侧手柄，可改变列偏移量，拖拽右侧手柄，可调整列数。或者从列属性面板中也可调整列数及列偏移。

• 改变列高度： 选中列，拖拽列下侧手柄，即可改变列组件的高度。

• 列改变顺序

  • 选中列，通过工具栏中图层操作，可对列进行置顶/置底/上移一层/下移一层操作。
  • 通过图层面板拖拽列，即可调整列的顺序。

3. 组件操作

• 选中组件

  • 由于组件包含在栅格容器中，从画布中选中组件需要单击三次。第一次选中行，第二次选中列，第三次选中组件。
  • 从图层面板中直接选中组件。

• 列内组件互相拖拽交换位置

4. 组件成组轮播

选中两个以上列，并且列中有组件，点击工具栏中成组操作，即可组合成轮播组件。

5. 设备切换

通过工具栏设备操作即可切换不同设备下的尺寸。

• 大屏： >= 1600px

• 台式机： >= 1200px

• 笔记本： >= 992px

• 平板： >= 768px

• 手机： < 768px

组件属性

选中组件，右侧为属性面板。

行属性

• 间距： 栅格左右间距。

• Flex 布局： Flex 布局。

• 水平排列： Flex 布局下的水平排列方式。

• 垂直排列： Flex 布局下的垂直排列方式。

列属性

• 隐藏： 断点隐藏。仅在台式机、笔记本、平板尺寸下使用。

• 内边距： 设置列的上下边距。

• 列数： 列数。

• 列偏移： 列偏移。

节点编程

全局节点

• 响应式尺寸改变后事件： 用于响应式尺寸改变后事件，事件抛出数据为：XL\LG\MD\SM\XS。