文档首页> 产品数字化协同平台云服务> 开发指南> 流程配置指南> UI编辑器使用帮助> IPD组件> 容器组件> 栅格布局（行容器）
更新时间：2024-02-26 GMT+08:00
查看PDF
分享

栅格布局（行容器）

使用场景

通过基础的24分栏结构，迅速简便地创建栅格布局。

组件图标：

基本属性

表1 基础信息

序号

属性名

说明

设置器类型

可选值

默认值

支持变量绑定

1

栅格

一行中栅格的分栏数

布局选择器

24，12:12，6:18，18:6，16:8，8:8:8，6:12:6，6:6:6:6，4:4:4:4:4:4

12:12

√

2

栅格间隔

栅格的间隔格数

数字输入框

≥0

-

√

3

Flex布局模式

是否开启Flex布局

开关

关/开

关

√

4

水平排列方式

开启Flex布局后的水平排列方式(需开启Flex布局模式)

下拉选择框

从行首开始排列/从行尾开始排列/居中/两端对齐/均匀分布

-

√

5

垂直排列方式

开启Flex布局后的垂直排列方式(需开启Flex布局模式)

下拉选择框

居下，居中，居上

-

√

属性详解

栅格

控制行容器中列容器占据的栅格数，提供了9个可用的预设，并且可以通过拖动下方的自定义滑块，控制每一个列容器的宽度占比。

图1 栅格

栅格间隔

列容器两两之间相距的距离（单位：像素）。

图2 栅格间隔

Flex布局模式

是否开启Flex布局模式，开启后展示“水平排列模式”和“垂直排列模式”两个选项。

  • 水平排列方式如图3所示。
    图3 水平排列方式
  • 垂直排列方式如图4所示。
    图4 垂直排列方式

父主题： 容器组件
分享：

    相关文档

    相关产品