介绍

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

代码演示

基础使用

使用span属性配置子元素占据的列数，不带 span 的 col 会平分空间。

<template>
  <s-row>
    <s-col>
      <div class="layout-box">span</div>
    </s-col>
    <s-col>
      <div class="layout-box">span</div>
    </s-col>
  </s-row>

  <s-row>
    <s-col :span="4">
      <div class="layout-box">span-4</div>
    </s-col>
    <s-col :span="8">
      <div class="layout-box">span-8</div>
    </s-col>
  </s-row>

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

列偏移

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

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

水平对齐

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

vue ts

<template>
  <s-row v-for="item in justifyTypes" :justify="item">
    <s-col v-for="i in 3" :span="3">
      <div class="layout-box">{{ item }}</div>
    </s-col>
  </s-row>
</template>

<script setup lang="ts">
const justifyTypes = ['start', 'center', 'end', 'around', 'between', 'evenly'] as const
</script>

vue js

<template>
  <s-row v-for="item in justifyTypes" :justify="item">
    <s-col v-for="i in 3" :span="3">
      <div class="layout-box">{{ item }}</div>
    </s-col>
  </s-row>
</template>

<script setup lang="js">
const justifyTypes = ['start', 'center', 'end', 'around', 'between', 'evenly']
</script>

垂直对齐

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

vue ts

<template>
  <div class="layout-align">
    <s-row v-for="item in alignTypes" :align="item">
      <s-col>
        <div class="layout-box">{{ item }}</div>
      </s-col>
      <s-col>
        <div class="layout-box" style="height: 90px">{{ item }}</div>
      </s-col>
    </s-row>
  </div>
</template>

<script setup lang="ts">
const alignTypes = ['start', 'center', 'end', 'stretch'] as const
</script>

vue js

<template>
  <div class="layout-align">
    <s-row v-for="item in alignTypes" :align="item">
      <s-col>
        <div class="layout-box">{{ item }}</div>
      </s-col>
      <s-col>
        <div class="layout-box" style="height: 90px">{{ item }}</div>
      </s-col>
    </s-row>
  </div>
</template>

<script setup lang="js">
const alignTypes = ['start', 'center', 'end', 'stretch']
</script>

列间距

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

<template>
  <s-row :gap="30">
    <s-col>
      <div class="layout-box">span</div>
    </s-col>
    <s-col>
      <div class="layout-box">span</div>
    </s-col>
  </s-row>
</template>

列顺序

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

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

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

API

RowProps

属性	描述	类型	默认值
gap	列间距	string | number	-
justify	水平对齐方式	'start' | 'center' | 'end' | 'around' | 'between' | 'evenly'	-
align	垂直对齐方式	'start' | 'center' | 'end' | 'stretch'	-

RowSlots

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

ColProps

属性	描述	类型	默认值
span	列元素宽度	number | 'auto' | 'none'	-
offset	列元素偏移距离	number	-
order	列元素顺序	number	-

ColSlots

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