Space 间距

设置组件之间的间距。

代码演示

基本用法

相邻组件水平间距。

Space

<template>
  <a-space>
    Space
    <a-button type="primary">Button</a-button>
    <a-upload>
      <a-button>
        <UploadOutlined />
        Click to Upload
      </a-button>
    </a-upload>
    <a-popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No">
      <a-button>Confirm</a-button>
    </a-popconfirm>
  </a-space>
</template>
<script setup>
export {};
</script>

自定义尺寸

自定义间距大小。

<template>
  <div>
    <a-slider v-model:value="size" />
    <br />
    <br />
    <a-space :size="size">
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="link">Link</a-button>
    </a-space>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue';
const size = ref(8);
</script>

间距大小

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

SmallMiddleLarge

<template>
  <div>
    <a-radio-group v-model:value="size1">
      <a-radio value="small">Small</a-radio>
      <a-radio value="middle">Middle</a-radio>
      <a-radio value="large">Large</a-radio>
    </a-radio-group>
    <br />
    <br />
    <a-space :size="size1">
      <a-button type="primary">Primary</a-button>
      <a-button>Default</a-button>
      <a-button type="dashed">Dashed</a-button>
      <a-button type="link">Link</a-button>
    </a-space>
  </div>
</template>
<script setup>
import { ref } from 'vue';
const size = ref('small');
</script>

垂直间距

相邻组件垂直间距。 可以设置 width: 100% 独占一行。

Card

Card content

Card content

Card

Card content

Card content

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

分隔符

相邻组件分隔符。

Link

Link

Link

<template>
  <a-space>
    <template #split>
      <a-divider type="vertical" />
    </template>
    <a-typography-link>Link</a-typography-link>
    <a-typography-link>Link</a-typography-link>
    <a-typography-link>Link</a-typography-link>
  </a-space>
</template>

API

Space

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

Space.Compact

需要表单组件之间紧凑连接且合并边框时，使用 Space.Compact。支持的组件有：

• Button
• AutoComplete
• Cascader
• DatePicker
• Input/Input.Search
• Select
• TimePicker
• TreeSelect

参数	说明	类型	默认值
block	将宽度调整为父元素宽度的选项	boolean	false
direction	指定排列方向	vertical | horizontal	horizontal
size	子组件大小	large | middle |	small