Mural Plus

Layout 布局 ​

布局组件用于将页面划分为行与列，快速搭建栅格结构。mu-row 作为行容器控制子元素的间距与排列方式，mu-col 作为列容器按 24 栅格划分行宽。

小程序APPWeb
✓✓✓

实例 ​

以下按属性分别说明 mu-row 与 mu-col 的用法，可按需组合。

html
<template>
  <mu-row :gutter="16">
    <mu-col :span="12">A</mu-col>
    <mu-col :span="12">B</mu-col>
  </mu-row>
</template>

Row 间距 ​

设置列之间的间隔，单位为像素，默认 0。

html
<mu-row :gutter="24">
  <mu-col :span="12">A</mu-col>
  <mu-col :span="12">B</mu-col>
</mu-row>

Row 水平对齐 ​

控制列在主轴上的分布方式，可选 start、center、end、space-between、space-around。

html
<mu-row justify="center">
  <mu-col :span="8">A</mu-col>
</mu-row>

<mu-row justify="space-between">
  <mu-col :span="8">A</mu-col>
  <mu-col :span="8">B</mu-col>
</mu-row>

Row 垂直对齐 ​

控制列在交叉轴上的对齐方式，可选 top、middle、bottom。

html
<mu-row align="middle">
  <mu-col :span="8">A</mu-col>
  <mu-col :span="8">B</mu-col>
</mu-row>

Row 换行 ​

列总宽度超出容器时是否换行，默认为换行。

html
<mu-row :wrap="false">
  <mu-col :span="16">A</mu-col>
  <mu-col :span="16">B</mu-col>
</mu-row>

Col 栅格 ​

span 表示该列占用的栅格数，24 为整行宽度。

html
<mu-row>
  <mu-col :span="8">三分之一</mu-col>
  <mu-col :span="16">三分之二</mu-col>
</mu-row>

Col 偏移 ​

offset 表示该列左侧空出的栅格数，用于控制列的位置。

html
<mu-row>
  <mu-col :span="8" :offset="8">右侧留白</mu-col>
</mu-row>

属性 ​

全部属性均可选，未传入时使用默认值；默认值列为 - 表示空字符串。

Row 行 ​

属性名称说明类型默认值
gutter列之间的间距，单位为像素number0
justify主轴方向的对齐方式，可选 start、center、end、space-between、space-aroundstringstart
align交叉轴方向的对齐方式，可选 top、middle、bottomstringtop
wrap空间不足时是否换行booleantrue
customClass自定义类名，附加在行容器根节点上以覆盖默认样式string-
customStyle自定义行内样式，直接作用于行容器根节点any-

Col 列 ​

属性名称说明类型默认值
span占用的栅格数，满宽为 24number24
offset左侧空出的栅格数number0
customClass自定义类名，附加在列容器根节点上以覆盖默认样式string-
customStyle自定义行内样式，直接作用于列容器根节点any-

事件 ​

组件支持以下事件。

事件名说明回调参数
click点击行容器时触发（mu-row）event: UniEvent
click点击列容器时触发（mu-col）event: UniEvent