Layout 栅格布局

Layout 组件提供了 24 列栅格系统，通过 Row（行）和 Col（列）组件的组合使用，可以轻松实现各种响应式布局。

导入

import Row from '@/components/layout/grid/Row.vue'
import Col from '@/components/layout/grid/Col.vue'

用法

基础用法

通过在 Col 上添加 span 属性设置列所占的宽度百分比。

<template>
  <Row>
    <Col backgroundColor="primary" :span="8"><Text>span: 8</Text></Col>
    <Col backgroundColor="success" :span="8"><Text>span: 8</Text></Col>
    <Col backgroundColor="primary" :span="8"><Text>span: 8</Text></Col>
  </Row>
  <Row>
    <Col backgroundColor="primary" :span="4"><Text>span: 4</Text></Col>
    <Col backgroundColor="success" :offset="10" :span="10"><Text>offset: 10, span: 10</Text></Col>
  </Row>
  <Row>
    <Col backgroundColor="primary" :offset="12" :span="12"><Text>offset: 12, span: 12</Text></Col>
  </Row>
</template>

设置列元素间距

通过 gutter 属性可以设置列元素之间的间距，默认间距为 0。

<template>
  <Row :gutter="20">
    <Col backgroundColor="primary" :span="8"><Text>span: 8</Text></Col>
    <Col backgroundColor="success" :span="8"><Text>span: 8</Text></Col>
    <Col backgroundColor="primary" :span="8"><Text>span: 8</Text></Col>
  </Row>
</template>

对齐方式

通过 justify 属性可以设置主轴上内容的对齐方式，等价于 flex 布局中的 justifyContent 属性。

<template>
  <Row justify="center">
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="success" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
  </Row>
  <Row justify="flex-end">
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="success" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
  </Row>
  <Row justify="space-between">
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="success" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
  </Row>
  <Row justify="space-around">
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="success" :span="6"><Text>span: 6</Text></Col>
    <Col backgroundColor="primary" :span="6"><Text>span: 6</Text></Col>
  </Row>
</template>

API 参考

Row

栅格行组件，是 Col 组件的容器。

Props

名称	说明	类型	必填	默认值
gutter	列元素之间的间距（单位为 px）	number	-	0
wrap	是否自动换行	boolean	-	false
inline	是否为行内元素	boolean	-	false
flex	flex 属性值	number | string	-	1
justify	主轴对齐方式	string	-	-
align	交叉轴对齐方式	string	-	-
direction	flex 方向	string	-	'row'
padding	边距设置	number | number[]	-	-
margin	外边距设置	number | number[]	-	-
radius	圆角大小	number	-	-
gap	子元素间距	number	-	-
touchable	是否可点击	boolean	-	false
backgroundColor	背景颜色	string	-	-
pressedColor	按下时的背景颜色	string	-	-
activeOpacity	按下时的透明度	number	-	-
width	宽度	string | number	-	-
height	高度	string | number	-	-
overflow	溢出处理	string	-	-
innerStyle	自定义样式	Object	-	-

Slots

名称	说明
default	Row 内容区域，用于放置 Col 组件

Col

栅格列组件，建议作为 Row 的子组件使用。

Props

名称	说明	类型	必填	默认值
span	列元素宽度，取值范围 0-24	number	-	0
offset	列元素偏移距离，取值范围 0-24	number	-	0
direction	flex 方向	string	-	'column'
justify	主轴对齐方式	string	-	-
align	交叉轴对齐方式	string	-	-
padding	边距设置	number | number[]	-	-
margin	外边距设置	number | number[]	-	-
radius	圆角大小	number	-	-
gap	子元素间距	number	-	-
touchable	是否可点击	boolean	-	false
backgroundColor	背景颜色	string	-	-
pressedColor	按下时的背景颜色	string	-	-
activeOpacity	按下时的透明度	number	-	-
width	宽度	string | number	-	-
height	高度	string | number	-	-
overflow	溢出处理	string	-	-
innerStyle	自定义样式	Object	-	-

Slots

名称	说明
default	Col 内容区域

主题变量

Layout 组件继承了 FlexView 组件的主题变量，具体可参考 Flex 布局 的主题变量部分。