栅格
栅格
适用场景
用以在页面布局设计时,将其分割成指定比例的区块。比如将页面均分为两列、三列,或按照1:2分割等。
属性介绍
属性分类 | 属性名称 | 属性作用 |
---|---|---|
基本属性 | 组件ID | 组件在当前页面的唯一标识。 |
布局属性 | 垂直对齐 | 定义栅格中网格的垂直对齐方式,支持靠上对齐、居中对齐和底部对齐三种方式。 |
列间隙大小 | 列即栅格中分割的每一网格,定义栅格中每一网格与每一网格之间的间隙大小 | |
显示分割线 | 控制每一网格与每一网格之间的分割线的展示 |
基础功能
栅格组件是一个布局组件,可以选择不同的网格分割模式,定义网格垂直对齐方式以及间隙大小来进行布局。基本用法如下:
步骤1: 新建标准页面:栅格组件页面,如下所示:
步骤 2: 然后从左侧的组件列表拖动“栅格”组件到画布区域,设置网格分割模式,如下所示:
步骤 3: 网格分割模式选择“8:8:8”模式后,页面会自动填入该模式的栅格组件,每一个网格都是一个容器组件,可以往容器内拖拽组件,如下所示:
步骤 4: 分别拖拽组件,设置“栅格”组件的属性,如下所示:
最终运行态组件展示如下所示:
高级功能
暂无