import Spacer from '@ui/Spacer.vue'

Spacer ​

Add a 16px gap between adjacent items.

Without spacer ​

<Alert green">A</Alert>
<Alert red">B</Alert>

With spacer ​

<Alert green">A</Alert>
<Spacer/>
<Alert red">B</Alert>

Spacers can also be added for horizontal space ​

<Layout flex>
  <Alert blue">A</Alert>
  <Alert yellow">B</Alert>
  <Spacer/>
  <Alert red">C</Alert>
</Layout>

Modify the size of a Spacer ​

<script setup>
const size = ref(1);
</script>

<template>
  <Input v-model="size" type="range" />

  <Alert yellow>A</Alert>
  <Spacer :size="+size" />
  <Alert purple>B</Alert>
</template>

Note the + before size. Some browsers will output a string for the Input value, and the JavaScript + prefix parses it into a number. Spacers need numeric size values because positive size values affect the dimensions of the element while negative sizes cause negative margins.

Make the Spacer elastic (responsive) ​

<Layout stack no-gap
  :style="{ height: size + '%' }"
>
  <Button min-content outline>A</Button>
  <Spacer grow title="grow" />
  <Button min-content outline>B</Button>
  <Button min-content outline>C</Button>
  <Spacer shrink title="shrink" />
  <Button min-content outline>D</Button>
  <Spacer grow shrink title="grow shrink" />
  <Button min-content outline>E</Button>
</Layout>

Restrict the dimension of a spacer with the v and h props ​

By default, a spacer is square. You can make it horizontal with h and vertical with v. See the example in the following section.

Use the Spacer to vary an element's dimensions ​

<Input v-model="size" type="range" />
<Card min-content title="h">
  <Spacer h :size="size * 4" style="border:5px dashed;" />
</Card>
<Card min-content title="v">
  <Spacer v :size="size * 4" style="border:5px dashed;" />
</Card>

<Layout
  flex
  no-gap
  style="outline: 1px dashed currentcolor;"
>
  Before
  <Spacer />
  After
</Layout>