Komponent

FPageLayout

Status

Beta

Applikationsmallen erbjuder olika layouter för att dela upp en applikation som täcker hela skärmen i ytor. Du kan utgå från en av fyra standardlayouter eller skapa en egen. Mallen styr hur ytorna placeras i förhållande till varandra. Storleken på en yta styrs av vad som placeras i ytan.

Se också exempelapplikation för Applikationsmall (källkod) för en komplett applikation.

Användning

<script setup lang="ts">
import { FPageLayout } from "@fkui/vue";
</script>

<template>
    <f-page-layout layout="three-column">
        <template #default="{ header, left, right, content, footer }">
            <header :slot="header" class="my-header">[header]</header>
            <div :slot="left" class="my-left-panel">[left]</div>
            <div :slot="right" class="my-right-panel">[right]</div>
            <main :slot="content" class="my-content">[main]</main>
            <footer :slot="footer" class="my-footer">[footer]</footer>
        </template>
    </f-page-layout>
</template>

<style scoped>
.my-header {
    background: darkred;
    color: white;
    padding: 1rem;
}

.my-footer {
    background: cyan;
    color: black;
    padding: 1rem;
}

.my-left-panel {
    background: greenyellow;
    padding: 1rem;
    flex-grow: 1;
    width: 25cqw;
}

.my-right-panel {
    background: hotpink;
    padding: 1rem;
    flex-grow: 1;
    width: 25cqw;
}

.my-content {
    flex-grow: 1;
    padding: 1rem;
}
</style>

Vilken layout som används bestäms av layout-propen:

<f-page-layout layout="three-column"></f-page-layout>

Vilka ytor som finns varierar mellan layouter. Ytans innehåll fylls med hjälp av Vue slots med motsvarande namn.

För att fylla ytan header med innehåll:

<f-page-layout layout="three-column">
    <template #default="{ header }">
        <header :slot="header">
            <h1>My header</h1>
        </header>
    </template>
</f-page-layout>

Sidlayouten i sig tar upp hela skärmstorleken men inga ytor kommer med inbyggd marginal, padding, bredd eller höjd utan storlek bestäms helt av innehållet. Du kan med fördel använda flex-grow: 1 för att täcka upp hela ytans maximala storlek.

Landmärken

Landmärken ingår inte i applikationslayout utan konsumenten måste själv använda lämpliga landmärken. Vi rekommenderar att använda följande landmärken i respektive yta:

• <header> i header ytan.
• <footer> i footer ytan.
• <main> i content ytan.

Beroende på innehåll i left och right ytorna är följande landmärken lämpliga:

• <nav> om ytan innehåller navigering exempelvis en meny.
• <aside> om ytan innehåller sekundärt innehåll som inte direkt relaterar till det primära innehållet.

Standardlayouter

Följande förkonfigurerade layouter följer med som standard:

Egen layout

Utöver förkonfigurerade layouter kan man skapa en egen.

Läs mer om att skapa egen layout.

Relaterat

Applikationslayout exempelapplikation (källkod)