5.5 KiB

Czysty Wina Historia

Layout section

Alignment

<Section alignLeft />

Item width

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

<Section medium-items />

Heading

h1 or h2 or h3 ="title"

<Section h3="My title" />

Action

Will be shown on the right side of the header

(a) Add a link:

<Section :action="{ text:'more...', to:'/' }" />

(b) Or a button:

<Section :action="{ text:'more...', onClick:'loadMore' }" />

Example

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

---

<div class="preview" style="margin: 0 -40px; padding: 0 25px;">

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

<LayoutSection
    :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" />
</LayoutSection>

</div>

Artist Name 13 tracks Artist Name 13 tracks Artist Name 13 tracks

5.5 KiB Czysty Wina Historia