Space

Sets spacing between components and different DOM elements with consistent intervals for easy use.

Basic Usage

space

<template>
  <b-space>
    space
    <b-button type="primary">Button</b-button>
    <b-button icon="upload">Button</b-button>
    <b-button type="danger">Delete</b-button>
  </b-space>
</template>

Verticalspacing

Card

card content

card content

Card

card content

card content

<template>
  <b-space direction="vertical">
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
    <b-card width="480px" head-tip header="Card">
      <p>card content</p>
      <p>card content</p>
    </b-card>
  </b-space>
</template>

Spacing Size

Mini小DefaultLarge

space

<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="'mini'">Mini</b-radio>
      <b-radio :label="'small'">小</b-radio>
      <b-radio :label="'default'">Default</b-radio>
      <b-radio :label="'large'">Large</b-radio>
    </b-radio-group>

    <b-space :size="size">
      space
      <b-button type="primary">Button</b-button>
      <b-button icon="upload">Button</b-button>
      <b-button type="danger">Delete</b-button>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref('default')
</script>

Custom Number Size

816243240

Card name

List item 1

List item 2

List item 3

List item 4

Card name

List item 1

List item 2

List item 3

List item 4

Card name

List item 1

List item 2

List item 3

List item 4

<template>
  <b-space direction="vertical" alignment="start" :size="30">
    <b-radio-group v-model="size" type="capsule">
      <b-radio :label="8">8</b-radio>
      <b-radio :label="16">16</b-radio>
      <b-radio :label="24">24</b-radio>
      <b-radio :label="32">32</b-radio>
      <b-radio :label="40">40</b-radio>
    </b-radio-group>

    <b-space wrap :size="size">
      <b-card v-for="i in 3" :key="i" class="box-card" style="width: 250px">
        <template #header>
          <div class="card-header">
            <span>Card name</span>
            <b-button type="text">Operation button</b-button>
          </div>
        </template>
        <div v-for="o in 4" :key="o" class="text item">
          {{ 'List item ' + o }}
        </div>
      </b-card>
    </b-space>
  </b-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
const size = ref(16)
</script>

Wrap

<template>
  <b-space wrap>
    <div v-for="i in 20" :key="i">
      <b-button type="text">文字button</b-button>
    </div>
  </b-space>
</template>

Separator

|

|

>-<

>-<

<template>
  <b-space :size="size" spacer="|">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
  <br />
  <br />
  <b-space :size="size" :spacer="spacer">
    <div v-for="i in 3" :key="i">
      <b-button>button {{ i }}</b-button>
    </div>
  </b-space>
</template>

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

const size = ref(10)
const spacer = h('span', { style: { color: '#999' } }, '>-<')
</script>

Alignment

Set this value to adjust the alignment of all child nodes within the container. Available values are consistent with align-items.

string

header

body

string

header

body

string

header

body

<template>
  <b-space>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space>
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-start">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
    <div style="width: 240px; margin-bottom: 20px; padding: 8px; border: 1px solid #ccc">
      <b-space alignment="flex-end">
        string
        <b-button>button</b-button>
        <b-card>
          <template #header>header</template>
          body
        </b-card>
      </b-space>
    </div>
  </b-space>
</template>

Space Props

Parameter	Description	Type	Options	Default
alignment	Alignment mode	String	-	'center'
class	Class name	String / Array<Object | String> / Object	-	-
direction	Arrangement direction	String	vertical/horizontal	horizontal
prefixCls	Class name prefix for space-items	String	bin-space	-
style	Additional styles	String / Array<Object | String> / Object	-	-
spacer	Spacer	String / Number / VNode	-	-
size	Spacing size	String / Number / [Number, Number]	-	'small'
wrap	Whether to auto wrap	Boolean	true / false	false

Space Slot

name	Description
default	Elements to which spacing should be added