5.4 KiB

Raw Blame History

import Layout from "~/components/ui/Layout.vue"

Layout

CSS provides four methods to arrange items in a container: Flow, Columns, Flex and Grid. To make typical alignment tasks in the Funkwhale UI easier, we have created a few useful presets.

By default, the items have a 32px gap. You can change it with the gap-x prop.

Apply presets

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.

Add semantics

Add one of these props to your Layout component to turn them into semantic containers (without affecting their presentation):

Headings: "h1" | "h2" | "h3" | "h4" | "h5"

Sectioning: "nav" | "aside" | "header" | "footer" | "main"

Forms: "label" | "form"

Common props

`gap-x`: Set the gap to one of the defaults

`gap-${'4' | '8' | '12' | '16' | '24' | '32' | '48' | '64' | 'auto'}`

`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>

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:25em;">
    <Alert red />
    <Alert purple />
    <Spacer :grow="isGrowing || undefined" />
    <Alert blue />
  </Layout>
</template>

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:35em;">
    <Alert blue />
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert green />
    <Alert yellow />
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert red />
  </Layout>
</template>

5.4 KiB Raw Blame History