funkwhale/front/ui-docs/components/ui/layout/spacer.md

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

Make the Spacer elastic (responsive)

<Layout flex style="height:30em;">
  <Input v-model="size"
    type="range"
    style="writing-mode: vertical-lr; height:100%"
  />

  <Layout stack no-gap
    :style="{ height: size + '%' }"
  >
    <Alert blue>A</Alert>
    <Spacer grow title="grow" />
    <Alert red>B</Alert>
    <Alert green>C</Alert>
    <Spacer shrink title="shrink" />
    <Alert purple>D</Alert>
    <Spacer grow shrink title="grow shrink" />
    <Alert yellow>E</Alert>
  </Layout>
</Layout>

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

A B C D E

Use the Spacer to vary an element's dimensions