Space 间距

设置组件之间的间距。

何时使用

避免组件紧贴在一起，拉开统一的空间。

• 适合行内元素的水平间距。
• 可以设置各种水平对齐方式。

基本用法

相邻组件水平间距。

<template>
  <g-space>
    Space
    <g-button type="primary">Button</g-button>
    <g-button>Default</g-button>
    <g-button type="dashed">Dashed</g-button>
    <g-button type="link">Link</g-button>
  </g-space>
</template>

垂直间距

相邻组件垂直间距。

<template>
  <g-space direction="vertical">
    <g-card title="Card" style="width: 300px;">
      <p>Card content</p>
      <p>Card content</p>
    </g-card>
    <g-card title="Card" style="width: 300px;">
      <p>Card content</p>
      <p>Card content</p>
    </g-card>
  </g-space>
</template>

间距大小

间距预设大、中、小三种大小。

通过设置 size 为 large middle 分别把间距设为大、中间距。若不设置 size，则间距为小。

<template>
  <div>
    <g-radio-group v-model:value="size">
      <g-radio value="small">Small</g-radio>
      <g-radio value="middle">Middle</g-radio>
      <g-radio value="large">Large</g-radio>
    </g-radio-group>
    <br />
    <br />
    <g-space :size="size">
      <g-button type="primary">Primary</g-button>
      <g-button>Default</g-button>
      <g-button type="dashed">Dashed</g-button>
      <g-button type="link">Link</g-button>
    </g-space>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  setup() {
    const size = ref('small')
    
    return {
      size
    }
  }
}
</script>

对齐

设置对齐模式。

<template>
  <div class="space-align-container">
    <div class="space-align-block">
      <g-space align="center">
        center
        <g-button type="primary">Primary</g-button>
        <span class="mock-block">Block</span>
      </g-space>
    </div>
    <div class="space-align-block">
      <g-space align="start">
        start
        <g-button type="primary">Primary</g-button>
        <span class="mock-block">Block</span>
      </g-space>
    </div>
    <div class="space-align-block">
      <g-space align="end">
        end
        <g-button type="primary">Primary</g-button>
        <span class="mock-block">Block</span>
      </g-space>
    </div>
    <div class="space-align-block">
      <g-space align="baseline">
        baseline
        <g-button type="primary">Primary</g-button>
        <span class="mock-block">Block</span>
      </g-space>
    </div>
  </div>
</template>

<style>
.space-align-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}

.space-align-block {
  margin: 8px 4px;
  border: 1px solid #40a9ff;
  padding: 4px;
  flex: none;
}

.mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}
</style>

自动换行

自动换行。

<template>
  <g-space wrap>
    <g-button v-for="i in 20" :key="i" type="primary">Button</g-button>
  </g-space>
</template>

分隔符

相邻组件分隔符。

<template>
  <g-space :size="size" separator="|">
    <g-button type="primary">Button</g-button>
    <g-button>Button</g-button>
    <g-button>Button</g-button>
    <g-button>Button</g-button>
  </g-space>
</template>

紧凑布局配合

紧凑布局组合。

<template>
  <g-space>
    <g-button>Button 1</g-button>
    <g-button>Button 2</g-button>
    <g-tooltip title="Tooltip">
      <g-button>Button 3</g-button>
    </g-tooltip>
  </g-space>
</template>

API

参数	说明	类型	默认值	版本
align	对齐方式	start | end | center | baseline	-	4.2.0
direction	间距方向	vertical | horizontal	horizontal	4.1.0
size	间距大小	small | middle | large | number	small	4.1.0
split	设置拆分	VNode | v-slot	-	4.7.0
wrap	是否自动换行，仅在 horizontal 时有效	boolean	false	4.9.0

插槽

名称	说明
default	间距中的内容
split	间距中的分隔符