介绍

基于行/列来划分区块以展示内容。栅格系统提供了 12 列容器来布局，需要配套使用Row和Col组件。

引入

import Row from 'sard-uniapp/components/row/row.vue'
import Col from 'sard-uniapp/components/col/col.vue'

代码演示

基础使用

使用span属性配置子元素占据的列数。

<template>
  <sar-row>
    <sar-col>
      <view class="layout-box">span</view>
    </sar-col>
    <sar-col>
      <view class="layout-box">span</view>
    </sar-col>
  </sar-row>

  <sar-row>
    <sar-col :span="4">
      <view class="layout-box">span-4</view>
    </sar-col>
    <sar-col :span="8">
      <view class="layout-box">span-8</view>
    </sar-col>
  </sar-row>

  <sar-row>
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
    <sar-col>
      <view class="layout-box">span</view>
    </sar-col>
    <sar-col span="auto">
      <view class="layout-box">auto</view>
    </sar-col>
  </sar-row>
</template>

列偏移

使用offset可以将列向右侧偏。

<template>
  <sar-row>
    <sar-col>
      <view class="layout-box">span</view>
    </sar-col>
    <sar-col :offset="3">
      <view class="layout-box">offset-3</view>
    </sar-col>
  </sar-row>
</template>

水平对齐

justify属性可以配置子元素在父容器中的水平对齐方式。

<template>
  <sar-row justify="start">
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
  </sar-row>

  <sar-row justify="center">
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
  </sar-row>

  <sar-row justify="end">
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
    <sar-col :span="3">
      <view class="layout-box">span-3</view>
    </sar-col>
  </sar-row>
</template>

垂直对齐

align属性可以配置子元素在父容器中的垂直对齐方式。

<template>
  <view class="layout-align">
    <sar-row align="start">
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
    </sar-row>

    <sar-row align="center">
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
    </sar-row>

    <sar-row align="end">
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
      <sar-col>
        <view class="layout-box">span-3</view>
      </sar-col>
    </sar-row>
  </view>
</template>

列间距

gap属性可以配置子元素之间的距离。

<template>
  <sar-row :gap="30">
    <sar-col>
      <view class="layout-box">span-3</view>
    </sar-col>
    <sar-col>
      <view class="layout-box">span-3</view>
    </sar-col>
  </sar-row>
</template>

列顺序

通过order来改变元素的排序。

<template>
  <sar-row>
    <sar-col>
      <view class="layout-box">col1</view>
    </sar-col>
    <sar-col :order="-1">
      <view class="layout-box">col2 order:-1</view>
    </sar-col>
  </sar-row>

  <sar-row>
    <sar-col :order="2">
      <view class="layout-box">col1 order:2</view>
    </sar-col>
    <sar-col :order="1">
      <view class="layout-box">col2 order:1</view>
    </sar-col>
    <sar-col>
      <view class="layout-box">col3</view>
    </sar-col>
  </sar-row>
</template>

API

RowProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
gap	列间距	string	-
justify	水平对齐方式	'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'	-
align	垂直对齐方式	'start' | 'center' | 'end' | 'stretch'	-

RowSlots

插槽	描述	属性
default	自定义默认内容	-

ColProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
span	列元素宽度	number | 'auto' | 'none'	-
offset	列元素偏移距离	number	-
order	列元素顺序	number	-

ColSlots

插槽	描述	属性
default	自定义默认内容	-