- 这是组件的基本用法,单行分为等份的三栏,分栏的间隔是 15px 时的效果,你可以直接在设计态中修改。
- 自定义行列用法,在右侧配置中的 布局-自定义行列 中输入各栏的比例值即可,格式为
2:2:2:2:4。 - 多行用法,在右侧配置中的 布局-自定义行列 中输入各栏的比例值即可,格式为
2:2:2:2:4:6:6, 一旦比例之和大于 12 时就会另换一行渲染,建议总数始终保持 12 的倍数。多行的情况下,可能需要 设置行间距(上下间距)。
何时使用
- 当需要对页面或者区块进行分栏布局时使用。
Documentation Index
Fetch the complete documentation index at: /llms.txt
Use this file to discover all available pages before exploring further.
ColumnsLayout 布局容器组件参考,介绍 12 栏分栏配置、预置布局与移动端换行规则,实现灵活的多栏页面布局。
2:2:2:2:4。2:2:2:2:4:6:6 ,
一旦比例之和大于 12 时就会另换一行渲染,建议总数始终保持 12 的倍数。多行的情况下,可能需要
设置行间距(上下间距)。| 属性 | 说明 | 类型 | 默认值 |
|---|---|---|---|
columnGap | 设置分栏相邻列之间的间距 | number | 0 |
display | 手机端的分栏排列方式 | 'VERTICAL' | 'HORIZONTAL' | 'VERTICAL' |
layout | 分栏配置,每行分为几栏,每一栏分别占几格 | string | '6:6' |
mobileRowGap | 手机端的垂直布局时的行间距 | string | '16px' |
rowGap | 在多行分栏的场景下,设置分栏相邻行之间的间距 | number | 0 |
此页面对您有帮助吗?