文档

栅格

更新时间:

简介

栅格属于一种容器组件,相当于行,其内部可分两栏(列)。可以手动复制分栏,插入多栏,每一栏都可以拖入其他组件。

image

属性配置

栅格组件属性由以下部分组成:

分类

基础属性

示例

说明

基础属性

布局方式

image

通过栅格属性定义,可以选择自适应布局和手动布局两种布局方式。详情请参考:布局方式

样式

分栏间隔

image

栅格可以通过调整分栏间隔改变每个分栏间的间隔。包括:

  • 大:12px

  • 中:8px

  • 小:4px

  • 无:0px

组件对齐方式

image

  • 栅格组件对齐方式包括:居中/左对齐/右对齐,主要用于手动布局条件下内部分栏的对齐。

  • 分栏的对齐方式包括:左上、上、右上、左、居中、右、左下、下、右下对齐,主要用于分栏内部组件的对齐。

宽度、高度、间距

image

栅格组件宽度、高度和间距设置属于页面组件通用属性。

关于此部分属性的更多信息,请参考样式

操作

添加分栏

image

添加分栏是分栏独有的操作,从左至右分别代表:下方添加分栏、上方添加分栏、左侧添加分栏、右侧添加分栏。

可见性

条件可见性

image

可见性确定栅格组件是否作为页面的一部分最终显示给用户。

关于此部分属性的更多信息,请参考条件可见性

布局方式

栅格类型属性将预定义的样式应用于栅格。可选项如下:

布局方式

说明

自适应布局

栅格选择自适应布局时,内部分栏可以选择自适应宽度或自适应内容宽度。

  • 自适应宽度:根据栅格宽度和分栏数量自适应调整宽度。

  • 自适应内容宽度:根据分栏内容自适应调整分栏宽度。

    image

手动布局

栅格选择手动布局时,内部分栏可以调整宽度比例。栅格总宽度被平均分为12份,每一个分栏可以选择12以内的0.5的倍数作为宽度。

image