3.5 KiB

Czysty Wina Historia

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

3.5 KiB Czysty Wina Historia