介绍

设置组件之间的间距。

引入

import Space from 'sard-uniapp/components/space/space.vue'

代码演示

基础使用

最基础的用法，通过间距组件来给组件之间提供统一的间距。

<template>
  <sar-space>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
  </sar-space>
</template>

垂直布局

使用 direction 来控制布局的方式, 背后实际上是利用了 flex-direction 来控制。

<template>
  <sar-space direction="vertical">
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
  </sar-space>
</template>

间距大小

通过调整 size 的值来控制间距的大小。

使用内置的 small、middle、large 来设置间距大小。

vue lang="ts"

<template>
  <sar-space direction="vertical" size="large">
    <sar-radio-group
      v-model="size"
      direction="horizontal"
      :options="spaceSizes"
    />

    <sar-space :size="size">
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
    </sar-space>
  </sar-space>
</template>

<script setup lang="ts">
import { spaceSizes, type SpaceSize } from 'sard-uniapp'
import { ref } from 'vue'

const size = ref<SpaceSize>('middle')
</script>

vue lang="js"

<template>
  <sar-space direction="vertical" size="large">
    <sar-radio-group
      v-model="size"
      direction="horizontal"
      :options="spaceSizes"
    />

    <sar-space :size="size">
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
    </sar-space>
  </sar-space>
</template>

<script setup lang="js">
import { ref } from "vue";
const size = ref("middle");
</script>

自定义间距大小

很多时候，内建的大小不满足设计师的要求，我们可以通过传入自己定义的大小来设置。

vue lang="ts"

<template>
  <sar-space direction="vertical" size="large">
    <sar-slider v-model="size" :min="0" :max="80" show-value />

    <sar-space :size="size + 'rpx'">
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
    </sar-space>
  </sar-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const size = ref(10)
</script>

vue lang="js"

<template>
  <sar-space direction="vertical" size="large">
    <sar-slider v-model="size" :min="0" :max="80" show-value />

    <sar-space :size="size + 'rpx'">
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
      <sar-button>按钮</sar-button>
    </sar-space>
  </sar-space>
</template>

<script setup lang="js">
import { ref } from "vue";
const size = ref(10);
</script>

自动换行

在 horizontal 模式下，通过使用 wrap 来控制自动换行行为。

<template>
  <sar-space wrap>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
    <sar-button>按钮</sar-button>
  </sar-space>
</template>

对齐

设置该值可以调整所有子节点在容器内的对齐方式，可设置的值与 align-items 一致。

vue lang="ts"

<template>
  <view v-for="item in alignments" :key="item" class="wrapper">
    <sar-space :align="item">
      <view>{{ item }}</view>
      <sar-button>按钮</sar-button>
      <sar-avatar />
    </sar-space>
  </view>
</template>

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

<style lang="scss" scoped>
.wrapper {
  border: 1px solid var(--sar-primary);
  margin-bottom: 20rpx;
}
</style>

vue lang="js"

<template>
  <view v-for="item in alignments" :key="item" class="wrapper">
    <sar-space :align="item">
      <view>{{ item }}</view>
      <sar-button>按钮</sar-button>
      <sar-avatar />
    </sar-space>
  </view>
</template>

<script setup lang="js">
const alignments = ["start", "center", "end", "baseline"];
</script>

<style lang="scss" scoped>
.wrapper {
  border: 1px solid var(--sar-primary);
  margin-bottom: 20rpx;
}
</style>

API

SpaceProps

属性	描述	类型	默认值
root-class	组件根元素类名	string	-
root-style	组件根元素样式	StyleValue	-
direction	排列的方向	'vertical' | 'horizontal'	'horizontal'
size	间隔大小	'small' | 'middle' | 'large' | string	'middle'
align	垂直排布方式	'start' | 'end' | 'center' | 'baseline'	-
justify 1.14.2+	水平排布方式	'start' | 'end' | 'center' | 'between'| 'around' | 'evenly'	-
wrap	设置是否自动折行	boolean	false

SpaceSlots

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

主题定制

CSS 变量

page,
.sar-portal {
  --sar-space-small-gap: 8rpx;
  --sar-space-middle-gap: 16rpx;
  --sar-space-large-gap: 24rpx;
}