Space

Set components spacing.

When To Use

• Avoid components clinging together and set a unified space.
• Use Space.Compact when child form components are compactly connected.

Examples

Basic

<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>
import { UploadOutlined } from '@ant-design/icons-vue'
</script>

Vertical

<template>
  <a-space direction="vertical" style="width: 100%">
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
    <a-card title="Card" size="small">
      <p>Card content</p>
      <p>Card content</p>
    </a-card>
  </a-space>
</template>

Size

<template>
  <div>
    <a-radio-group v-model:value="size">
      <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="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 setup>
import { ref } from 'vue'

const size = ref('small')
</script>

Align

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

<style scoped>
.space-align-container {
  display: flex;
  align-items: flex-start;
  flex-wrap: wrap;
}
.space-align-container .space-align-block {
  margin: 8px 4px;
  border: 1px solid #40a9ff;
  padding: 4px;
  flex: none;
}
.space-align-container .mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}
</style>

API

Space

Property	Description	Type	Default	Version
align	Align items	start | end | center | baseline	-
direction	The space direction	vertical | horizontal	horizontal
size	The space size	small | middle | large | number	small
split	Set split	VNode | v-slot	-
wrap	Auto wrap line, when horizontal effective	boolean	false

Space.Compact

Use Space.Compact to make child components compact connected.

Property	Description	Type	Default	Version
block	Option to fit width to its parent's width	boolean	false
direction	Set direction of layout	vertical | horizontal	horizontal
size	Set child component size	large | middle | small	middle