6.9 KiB

Czysty Wina Historia

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.

Items are laid out in a row and wrapped as they overflow the container. By default, all items in a row assume the same (maximum) height.

<Layout flex>
  <Card title="A" style="width:100px; min-width:100px"></Card>
  <Card title="B" :tags="['funk', 'dunk', 'punk']"></Card>
  <Card title="C" style="width:100px; min-width:100px"></Card>
  <Card title="D"></Card>
</Layout>

::: info Use additional flexbox properties

Find a list of all styles here: Flexbox guide on css-tricks.com

--gap: 4px align-self: flex-end flex-grow: 1 height: 5rem width: 100%

:::

Align items both vertically and horizontally

Override the `:column-width` (in px):

<Layout grid :column-width=90>
  <Alert>A</Alert>
  <Alert>B</Alert>
  ...
</Layout>

A B C D E F G

Let elements span multiple rows or columns:

<Layout grid>
  <Card title="A" class="span-2-columns"></Card>
  <Card title="B"></Card>
  <Card title="C" class="span-2-rows"></Card>
  <Card title="D"></Card>
</Layout>

```vue
<Card class="span-2-columns"></Card>
```

```vue
<Card class="span-2-rows"></Card>
```

Add space between vertically stacked items

<Layout stack>
  <Card title="A"></Card>
  <Card title="B"></Card>
  <Card title="C"></Card>
  <Card title="D"></Card>
  <Card title="E"></Card>
</Layout>

Let items flow like words on a printed newspaper, Great for very long lists of buttons or links.

<Layout columns :column-width="120">
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

  <Card small title="Cards...">...break over columns...</Card>

  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
  <Button icon="bi-star"/>
</Layout>

Normal paragraph. Text flows like in a newspaper. Set the column width in px. Columns will be equally distributed over the width of the container.

...break over columns...

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" style="width:100px; min-width:100px" />
    <Card title="B" />
    <Card title="C" style="width:100px; min-width:100px" />
    <Card title="D" />
  </Layout>
</template>

Add fixed or flexible Spacers

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:30em;">
    <Alert>A</Alert>
    <Alert>B</Alert>
    <Spacer :grow="isGrowing || undefined" />
    <Alert>C (footer)</Alert>
  </Layout>
</template>

A B C (footer)

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:

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

  <Layout stack style="height:25em;">
    <Alert>A</Alert>
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert>B1</Alert>
    <Alert>B2</Alert>
    <Spacer :size="-32" :grow="isGrowing || undefined" />
    <Alert>C (footer)</Alert>
  </Layout>
</template>

A B1 B2 C (footer)

6.9 KiB Czysty Wina Historia