3.9 KiB

Raw Permalink Blame History

import Spacer from '~/components/ui/Spacer.vue'

Spacer

Add a 16px gap between adjacent items.

Without spacer

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

A B

With spacer

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

A B

Spacers can also be added for horizontal space

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

A B C

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>

{{ size }}px

A B

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>

<template #input-right>{{ size }}%

A B C D E

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>

3.9 KiB Raw Permalink Blame History