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

<script setup>
import { ref } from 'vue'

import Card from '~/components/ui/Card.vue'
import Alert from '~/components/ui/Alert.vue'
import Layout from '~/components/ui/Layout.vue'
import Spacer from '~/components/ui/layout/Spacer.vue'
import Tab from '~/components/ui/Tab.vue'
import Tabs from '~/components/ui/Tabs.vue'
import Toggle from '~/components/ui/Toggle.vue'
import Button from '~/components/ui/Button.vue'

const isGrowing = ref(true)
const noGap = ref(true)
</script>

# 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.

<Layout flex style="--gap:8px">
  <Card width="163px" title="flex" to="./layout/flex" >
    <Layout flex>
      <Button primary icon="bi-eye" />
      <Button secondary icon="bi-eye" />
      <Button destructive icon="bi-eye" />
    </Layout>
  </Card>
  <Card width="163px" title="grid" to="./layout/grid" >
    <Layout grid column-width="40">
      <Button primary icon="bi-eye" />
      <Button secondary icon="bi-eye" style="grid-row: span 2; height: 100%;"  />
      <Button destructive icon="bi-eye" />
    </Layout>
  </Card>
  <Card width="163px" title="stack" to="./layout/stack" >
    <Layout stack style="--gap:0; margin:-8px;">
      <Button primary icon="bi-eye" />
      <Button secondary icon="bi-eye" />
      <Button destructive icon="bi-eye" />
    </Layout></Card>
  <Card width="163px" title="columns" to="./layout/columns" >
    <Layout columns column-width="40">
      <Button primary icon="bi-eye" />
      <Button secondary icon="bi-eye" />
      <Button destructive icon="bi-eye" />
    </Layout></Card>
</Layout>

## Common props

### `no-gap`: Remove the gap between items

<Layout flex>

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

<div class="preview" style="width:0">
  <Toggle v-model="noGap" /> {{ noGap ? 'no-gap' : '-' }}

---

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

</Layout>

### 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.

<Layout flex>

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

<div class="preview">
<Toggle v-model="isGrowing" /> {{ isGrowing ? 'grow' : '-' }}

---

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

</Layout>

Multiple spacers will distribute their growth evenly.

Note that you can set the minimum space occupied by the `Spacer` with its `size` prop [(docs)](./layout/spacer). 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):

<Layout flex>

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

<div class="preview" style="width:0">
<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>
</div>

</Layout>

---

<Tabs class="solid" style="border: 32px solid var(--background-color);border-radius: 8px;outline: 1px solid var(--border-color);margin: 0 -32px;">
<Tab title="Flex (default)" icon="⠖">

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

[Layout flex](./layout/flex)

</Tab>
<Tab title="Grid" icon="ꖛ">

Align items both vertically and horizontally

[Layout grid](./layout/grid)

</Tab>

<Tab title="Stack" icon="𝌆">

Add space between vertically stacked items

[Layout stack](./layout/stack)

</Tab>

<Tab title="Columns" icon="ꔖ">

Let text and items flow like on a printed newspaper

[Layout columns](./layout/columns)

</Tab>

</Tabs>