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

Spacer

Add a 16px gap between adjacent items.

Without spacer:

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

A B

With spacer:

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

A B

Spacers can also be added for horizontal space:

<Layout flex>
  <Alert color="blue">A</Alert>
  <Alert color="green">A</Alert>
  <Spacer/>
  <Alert color="red">B</Alert>
</Layout>

A A B

Modify the size of a Spacer

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

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

  <Alert color="blue">A</Alert>
  <Alert color="green">A</Alert>
  <Spacer :size="size" />
  <Alert color="red">B</Alert>
</template>

{{ size }}px

A B

Make the Spacer elastic

<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>A</Alert>
    <Spacer grow title="grow" />
    <Alert>B</Alert>
    <Alert>C</Alert>
    <Spacer shrink title="shrink" />
    <Alert>D</Alert>
    <Spacer grow shrink title="grow shrink" />
    <Alert>E</Alert>
  </Layout>
</Layout>

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

A B C D E