间距 Space

设置组件之间的间距

何时使用

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

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

基本使用

Space

Button

Are you sure delete this task?

No

Yes

Confirm

Show Code

<template>
  <Space align="center">
    Space
    <Button type="primary">Button</Button>
    <Popconfirm title="Are you sure delete this task?" ok-text="Yes" cancel-text="No">
      <Button>Confirm</Button>
    </Popconfirm>
  </Space>
</template>

自定义间距

NaN

Primary

Default

Dashed

Link

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const sizeNum = ref(8)
</script>
<template>
  <Slider v-model:value="sizeNum" />
  <br />
  <br />
  <Space :size="sizeNum">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="link">Link</Button>
  </Space>
</template>

预设间距

Small

Middle

Large

Primary

Default

Dashed

Link

Show Code

<script setup lang="ts">
import { ref } from 'vue'
const options = ref([
        {
          label: 'Small',
          value: 'small'
        },
        {
          label: 'Middle',
          value: 'middle'
        },
        {
          label: 'Large',
          value: 'large'
        }
      ])
const size = ref('small')
</script>
<template>
  <Radio :options="options" v-model:value="size" />
  <br/><br/>
  <Space :size="size">
    <Button type="primary">Primary</Button>
    <Button>Default</Button>
    <Button type="dashed">Dashed</Button>
    <Button type="link">Link</Button>
  </Space>
</template>

垂直间距

Card

Card content

Card content

Card

Card content

Card content

Show Code

<template>
  <Space direction="vertical">
    <Card title="Card" style="width: 300px">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
    <Card title="Card" style="width: 300px">
      <p>Card content</p>
      <p>Card content</p>
    </Card>
  </Space>
</template>

对齐

center

Primary

Block

start

Primary

Block

end

Primary

Block

baseline

Primary

Block

Show Code

<template>
  <div class="space-align-container">
    <div class="space-align-block">
      <Space align="center">
        center
        <Button type="primary">Primary</Button>
        <span class="mock-block">Block</span>
      </Space>
    </div>
    <div class="space-align-block">
      <Space align="start">
        start
        <Button type="primary">Primary</Button>
        <span class="mock-block">Block</span>
      </Space>
    </div>
    <div class="space-align-block">
      <Space align="end">
        end
        <Button type="primary">Primary</Button>
        <span class="mock-block">Block</span>
      </Space>
    </div>
    <div class="space-align-block">
      <Space align="baseline">
        baseline
        <Button type="primary">Primary</Button>
        <span class="mock-block">Block</span>
      </Space>
    </div>
  </div>
</template>
<style lang="less" scoped>
.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;
}
.space-align-block .mock-block {
  display: inline-block;
  padding: 32px 8px 16px;
  background: rgba(150, 150, 150, 0.2);
}
</style>

自动换行

Button

Button

Button

Button

Button

Button

Button

Button

Button

Button

Show Code

<template>
  <Space :size="[8, 16]">
    <template v-for="n in 10" :key="n">
      <Button>Button</Button>
    </template>
  </Space>
</template>

APIs

参数	说明	类型	默认值	必传
width	区域总宽度	string | number	'auto'	false
align	垂直排列方式	'stretch' | 'start' | 'end' | 'center' | 'baseline'	'start'	false
direction	间距方向	'horizontal' | 'vertical'	'horizontal'	false
size	间距大小，数组时表示: [水平间距, 垂直间距]	number | number[] | 'small' | 'middle' | 'large'	'small'	false
wrap	是否自动换行，仅在 horizontal 时有效	boolean	true	false