7.2 KiB

Czysty Wina Historia

Layout section

Sections divide the page vertically. Choose an appropriate heading level for each section: h1 or h2 or h3.

<Section h3="My title" />

Align the section to the page

<Section alignLeft />

Make the section header align with the section contents

Do you want to align the header to tiny, small or medium items?

<Section medium-items />

Provide an action

The link or button will be shown on the right side of the header.

<Layout stack gap-64>
  <Spacer />
  <Section h3="With a link" :action="{ text:'My library', to:'/' }" />

  <Section h3="With a button" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />
</Layout>

You can add props to the Link or Button, for example to make them primary or add an icon:

<Section solid primary icon="bi-star"
    h3="Do it!" :action="{ text:'Say hello!', onClick:()=>console.log('Hello') }" />

::: tip Gaps between consecutive sections

Place consecutive sections into a <Layout stack gap-64></Layout> to space them out. You can add spacers (negatice or positive) if you want to manually make one distance smaller or larger.

<Layout stack gap-64>
  <Spacer />
  <Section h3="Section 1"></Section>
  <Section h3="Section 2"></Section>
</Layout>

:::

Example

<Layout flex>
<Toggle v-model="alignLeft" label="Left-align the layout"/>
</Layout>

<Spacer />

<Layout stack gap-64>

<Section :alignLeft="alignLeft" small-items h3="Cards (small items)" :action="{ text:'more...', to:'/' }">
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
    <Card small title="Relatively Long Album Name">
        Artist Name
    </Card>
</Section>

<Section
    :alignLeft="alignLeft"
    medium-items
    h3="Activities (medium items)"
    :action="{ text:'more...', to:'/' }"
>
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
    <Activity :track="track" :user="user" />
</Section>
</Layout>

Artist Name Artist Name Artist Name

Responsivity

Cards and Activities snap to the grid columns. They have intrinsic widths, expressed in the number of columns they span. For Card, it is 3 and for Activity, it is 4.
On a typical laptop screen, you will have 4 albums or 3 activities side-by-side. On a typical mobile screen, you will have 1 medium card or 2 small ones in a row.
The remaining space is evenly distributed.
Title rows align with the content below them.

Resize the window to observe how the items move.

7.2 KiB Czysty Wina Historia