Space

Use this component to provide uniform spacing between components.

Basic usage

The most basic usage, through this component to provide a uniform spacing between components.

<template>
  <v-space wrap>
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

Control the size of the spacing

control the size of the spacing by adjusting the value of size

<template>
  <v-space direction="column">
    <v-space wrap size="small">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="medium">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="large">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
    <v-space wrap size="4rem">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
    </v-space>
  </v-space>
</template>

Arrangement direction

Vertical layout, use direction to control the way of layout, behind it is actually using flex-direction to control.

<template>
  <v-space direction="column">
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

Automatic line wrapping

set automatic line wrapping via wrap control

<template>
  <v-space wrap>
    <v-button v-for="key in 30" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

Alignment

controls the alignment of child nodes through align-items

stretch

---

center

---

start

---

end

---

normal

---

<script setup lang="ts">
const alignItems = ['stretch', 'center', 'start', 'end', 'normal'];
</script>

<template>
  <template v-for="align in alignItems" :key="align">
    <v-space :align-items="align">
      <v-button v-for="key in 4" :key="key" theme="primary">
        Button
      </v-button>
      <div :style="{ height: '60px', border: '1px solid red', background: 'gray' }">
        {{ align }}
      </div>
    </v-space>
    <hr>
  </template>
</template>

Fill the whole line

controls the child node to fill the entire line through fill

<template>
  <v-space fill>
    <v-button v-for="key in 4" :key="key" theme="primary">
      Button
    </v-button>
  </v-space>
</template>

API

space attribute

property name	description	type	default value
size	spacing size	string | enum	medium
align-items	alignment	enum	normal
direction	arrangement direction	enum	row
wrap	Whether to automatically wrap	boolean	false
fill	whether to fill the entire line	boolean	false

space slots

Slot Name	Description
default	default slot