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

Layout

The following containers are responsive. Change your window's size or select a device preset from your browser's dev tools to see how layouts are affected by available space.

Common props

no-gap: Remove the gap between items

<script setup>
const noGap = ref(true);
</script>

<template>
  <Toggle v-model="noGap" />

  <Layout flex :no-gap="noGap || undefined">
    <Card title="A" small />
    <Card title="B" small />
    <Card title="C" small />
    <Card title="D" small />
  </Layout>
</template>

{{ noGap ? 'no-gap' : '-' }}

---

Add fixed or flexible Spacers

::: info Only available on:

• stack
• flex

:::

If you add a spacer with attribute grow, it will push the other item until the Layout fills the available space. This only works if the parent element itself grows beyond its minimal contents.

<script setup>
const isGrowing = ref(true);
</script>

<template>
  <Toggle v-model="isGrowing" />

  <Layout stack style="height:20em;">
    <Alert red />
    <Alert purple />
    <Spacer :grow="isGrowing || undefined" />
    <Alert blue />
  </Layout>
</template>

{{ isGrowing ? 'grow' : '-' }}

---

Multiple spacers will distribute their growth evenly.

Note that you can set the minimum space occupied by the Spacer with its size prop (docs). Negative values can offset the gap of the Layout (but, due to a limitation of flexbox, not eat into the space occupied by adjacent items):

<template>
  <Toggle v-model="isGrowing" />

  <Layout stack style="height:25em;">
    <Alert blue />
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert green />
    <Alert yellow />
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert red />
  </Layout>
</template>

---

---

Items are laid out in a row and wrapped as they overflow the container

Layout flex

Align items both vertically and horizontally

Layout grid

Add space between vertically stacked items

Layout stack

Let text and items flow like on a printed newspaper

Layout columns