Egen layout till applikationsmall

Innehåll

Registrera tema
Positionering och storlek
Färger
Använd eget tema
Justerbara ytor och paneler

Registrera en ny layout med registerLayout(..). Anropet kan exempelvis göras från din main.tseller i root-komponenten som monterar applikationslayouten. Namnet som anges är vad som senare används i layout-propen till FPageLayout.

Registrera tema

import { registerLayout } from "@fkui/vue";

registerLayout({
    name: "my-custom",
    areas: {
        header: {
            attachPanel: "none",
            direction: "column",
        },
        toolbar: {
            attachPanel: "none",
            direction: "row",
        },
        sidebar: {
            attachPanel: "left",
            direction: "row",
        },
        content: {
            attachPanel: "none",
            direction: "column",
            scroll: true,
        },
        footer: {
            attachPanel: "none",
            direction: "column",
        },
    },
});

där:

attachPanel talar om hur en panel ska fästas. Om ytan inte kan ta paneler sätter man "none".
direction talar om ifall ytan flödar horisontellt eller vertikalt.
scroll talar om ifall ytan ska scrolla (i den riktning som direction talar om).

Typsäkra användning av den nya layouten genom att utöka interfacet FPageLayoutSlotMapping:

declare module "@fkui/vue" {
    interface FPageLayoutSlotMapping {
        "my-custom": ["header", "toolbar", "sidebar", "content", "footer"];
    }
}

Positionering och storlek

För positionering och storlek används CSS grid på ::part(grid name) och kan se ut så här:

::part(grid my-custom) {
    grid-template:
        "sidebar header" min-content
        "sidebar toolbar" min-content
        "sidebar content" 1fr
        "footer footer" min-content
        / min-content 1fr;
}

Namn motsvarar de ytor som registrerats tidigare med registerLayout().

Färger

Färg och bakgrundsfärg sätts med ::part(area name):

::part(area toolbar) {
    --f-page-layout-background: var(--fkds-color-background-secondary);
    --f-page-layout-color: var(--fkds-color-text-primary);
}

Namn motsvarar de ytor som registrerats tidigare med registerLayout().

Vi rekommenderar att använda semantiska färger.

Läs mer om semantiska färger.

Använd eget tema

Slutligen används layouten genom att sätta det nya registrerade namnet som layout attributet samt implementera de ytor som definierats med hjälp av Vue slots.

<f-page-layout layout="my-custom">
    <template #default="{ header, sidebar, toolbar, content, footer }">
        <div :slot="header">[header]</div>
        <div :slot="sidebar">[sidebar]</div>
        <div :slot="toolbar">[toolbar]</div>
        <div :slot="content">[content]</div>
        <div :slot="footer">[footer]</div>
    </template>
</f-page-layout>

Justerbara ytor och paneler

Komponenten FResizePane kan användas för att skapa en yta vars storlek kan justeras av slutanvändaren.

Använd useResize() composable för att styra FResizePane om du skapar egna paneler.