Skip to main content

栅格

栅格

适用场景

用以在页面布局设计时,将其分割成指定比例的区块。比如将页面均分为两列、三列,或按照1:2分割等。

属性介绍

属性分类属性名称属性作用
基本属性组件ID组件在当前页面的唯一标识。
布局属性垂直对齐定义栅格中网格的垂直对齐方式,支持靠上对齐、居中对齐和底部对齐三种方式。
列间隙大小列即栅格中分割的每一网格,定义栅格中每一网格与每一网格之间的间隙大小
显示分割线控制每一网格与每一网格之间的分割线的展示

基础功能

栅格组件是一个布局组件,可以选择不同的网格分割模式,定义网格垂直对齐方式以及间隙大小来进行布局。基本用法如下:

步骤1: 新建标准页面:栅格组件页面,如下所示:

img

步骤 2: 然后从左侧的组件列表拖动“栅格”组件到画布区域,设置网格分割模式,如下所示:

img

步骤 3: 网格分割模式选择“8:8:8”模式后,页面会自动填入该模式的栅格组件,每一个网格都是一个容器组件,可以往容器内拖拽组件,如下所示:

img

步骤 4: 分别拖拽组件,设置“栅格”组件的属性,如下所示:

img

最终运行态组件展示如下所示:

img

高级功能

暂无