跳到主要内容

布局

布局组件用来协助进行页面级整体布局。

每个布局组件都是一个N行M列的盒子,行列数可以自由修改,复杂的布局可以用多个布局组件组合来实现。比如下图中的顶部-侧边布局,顶部可以是一个1行1列的布局组件,下面是一个1行2列的布局组件。

顶部-侧边布局

经典案例:上中下布局固定侧边栏布局

何时使用

  • 进行页面整体布局时使用
  • 需要局部创建N行M列布局时使用,行和列都可以自由增删
  • 每一个网格都是一个插槽

功能演示

上中下布局

这种布局可以用3个1行1列的布局组件,也可以用1个3行1列的布局组件来实现。 行列数可以在布局组件的右侧配置栏中进行修改:选中布局组件,添加行或列;选中行列,可以进行删除 上中下布局

固定侧边栏布局

固定侧边栏

完整配置

布局

常规

属性名称说明
添加行可以无限制地向布局组件添加行
添加列可以无限制地向布局组件添加列

交互

属性名称说明
运行时调整列宽可以开启或关闭

样式

详见《基础必读》-组件配置

布局-列

常规

属性名称说明
宽度填充宽度填充可以选择自动、百分比、固定、适应内容
内容布局详见《基础必读》-内容布局
操作前面添加列、后面添加列、后移、删除

交互

可以设置列的点击事件

样式

详见《基础必读》-组件配置

布局-行

常规

属性名称说明
列间距布局是由行组成的,行是由列组成的,多个列直接的间隔可以调整
列自定义行的默认行为是:所有的行有着一样的列数。如果一个行开启了这一项,则它的列数就可以和其他行不一样,这为复杂布局提供了便利
操作前面添加行、后面添加行、下移、列等分、删除

交互

可以设置行的点击事件

样式

属性名称说明
高度填充宽度填充可以选择自动、百分比、固定