Applikationslayout

Komponent: FLayoutApplicationTemplate , FLayoutLeftPanel , FLayoutRightPanel
Status: Preliminär

Innehåll

Applikationsmall
Vänsteryta
Högeryta
API

Applikationslayout är en uppsättning komponenter som används för att bygga upp applikationer med fördefinierade ytor. Komponenterna består dels av en applikationsmall FLayoutApplicationTemplate som definierar upp ytor för sidhuvud, sidfot, toppnavigering och huvudinnehåll, och dels av två ytterligare komponenter: Vänsteryta FLayoutLeftPanel och Högeryta FLayoutRightPanel.

Helskärm

<template>
    <f-layout-application-template>
        <template #header>
            <!-- [html-validate-disable-next no-inline-style] -->
            <div style="background-color: green; color: white"><a href="#">[sidhuvud]</a></div>
        </template>

        <template #top-navigation>
            <!-- [html-validate-disable-next no-inline-style] -->
            <div style="background-color: lightgray"><a href="#">[toppnavigering]</a></div>
        </template>

        <f-layout-left-panel>
            <template #heading>
                <h3>Navigationstitel</h3>
            </template>

            <template #content> [content] </template>

            <template #default>
                <f-layout-right-panel>
                    <template #heading>
                        <h3>{{ selectedTitle }}</h3>
                    </template>

                    <template #content>
                        <p>{{ selectedText }}</p>
                        <button class="button button--primary" type="button" @click="closePanel()">
                            Stäng
                        </button>
                    </template>
                    <template #default>
                        <div class="container-fluid">
                            <h1>Primäryta</h1>
                            <p>Klicka nedan för att se mer i sekundärpanelen.</p>
                            <ul>
                                <li v-for="item in items" :key="item.title">
                                    <a
                                        :id="item.title"
                                        href="javascript:void(0)"
                                        class="anchor"
                                        @click="openPanel(item)"
                                    >
                                        {{ item.title }}
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </template>
                </f-layout-right-panel>
            </template>
        </f-layout-left-panel>

        <template #footer>
            <!-- [html-validate-disable-next no-inline-style] -->
            <div style="background-color: green; color: white; text-align: center">
                <a href="#">[sidfot]</a>
            </div>
        </template>
    </f-layout-application-template>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import {
    FLayoutApplicationTemplate,
    FLayoutLeftPanel,
    FLayoutRightPanel,
    FLayoutRightPanelService,
} from "@fkui/vue";

interface ExampleItem {
    title: string;
    text: string;
}

interface ExampleData {
    selectedText: string;
    selectedTitle: string;
    items: ExampleItem[];
}

export default defineComponent({
    name: "FullNavigationExampleApp",
    components: { FLayoutApplicationTemplate, FLayoutLeftPanel, FLayoutRightPanel },
    data(): ExampleData {
        return {
            selectedText: "",
            selectedTitle: "",
            items: [
                {
                    title: "Träutensilier",
                    text: "Träutensilierna i ett tryckeri äro ingalunda en oviktig faktor, för trevnadens, ordningens och ekonomiens upprätthållande, och dock är det icke sällan som sorgliga erfarenheter göras på grund af det oförstånd med hvilket kaster, formbräden och regaler tillverkas och försäljas Kaster som äro dåligt hopkomna och af otillräckligt",
                },
                {
                    title: "Lorem ipsum",
                    text: "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                },
            ],
        };
    },
    methods: {
        openPanel(item: ExampleItem): void {
            this.selectedTitle = item.title;
            this.selectedText = item.text;
            FLayoutRightPanelService.open();
        },
        closePanel(): void {
            FLayoutRightPanelService.close();
        },
    },
});
</script>

<style lang="css">
.example-grid .col {
    text-align: center;
    border: 1px dashed gray;
}
</style>

Applikationsmall

Applikationsmallen FLayoutApplicationTemplate består av fyra ytor: sidhuvud, toppnavigering, primäryta och sidfot.

Sidhuvud

I ytan för sidhuvudet placeras i regel komponenten Sidhuvud FPageheader. Se sidhuvud

Toppnavigering

I ytan för toppnavigering kan en horisontell Navigeringsmeny FNavigationMenu placeras. Se Navigationsmeny

Primäryta

Med primär yta menas behållaren med huvudinnehåll. Denna yta är obligatorisk och motsvarar komponentens default-slot.

I regel ska primärytan alltid ha en H1 rubrik.

Sidfot

I ytan för sidfoten kan lägre prioriterade länkar eller information visas längst ner på sidan.

Användning

Applikationsmallen läggs typiskt till i App.vue och man låter <router-view> renderas i default sloten (primärytan):

<template>
    <f-layout-application-template>
        <template #header>
            <!-- pageheader... --->
        </template>

        <template #top-navigation>
            <!-- top navigation... -->
        </template>

        <template #default>
            <router-view></router-view>
        </template>

        <template #footer>
            <!-- footer... -->
        </template>
    </f-layout-application-template>
</template>

Vänsteryta

Vänsterytan FLayoutLeftPanel placeras till vänster om den primära ytan -- här kan t ex länkar för navigering till undersidor i applikationen placeras. Den kan också användas för att visa sökalternativ då sökresultat listas i den primära ytan. Gemensamt för funktionaliteten som placeras i vänsterytan är att den påverkar vad som visas i den primära ytan.

Vänsterytan kan minimeras genom att klicka på pilarna längst upp till höger, i minimerat läge visas ytan som en tunn list som kan expanderas genom att klicka på menysymbolen.

Högeryta

Högerytan FLayoutRightPanel ger möjlighet att visa detaljerad information om något som visas sammanfattat i den primära ytan. Högerytan ytan borrar ner och fördjupar information från den primära. Det kan vara till exempel en tabell- eller listrad i den primära ytan som man kan öppna upp och visa mer detaljerad information om i högerytan.

Den högra ytan kan stängas igen genom att klicka på krysset i det högra hörnet, men till skillnad från en modal behöver den inte stängas för att kunna visa och hantera resterande innehåll i den primära ytan.

API

`FLayoutApplicationTemplate`

Slots
Name	Description	Bindings
header	Slot for displaying the header.	‐
top-navigation	Slot for displaying top navigation.	‐
default	Slot for displaying the primary content.	‐
footer	Slot for displaying the footer.	‐

`FLayoutLeftPanel`

Props
Name	Description	Type	Required	Default
initialWidth	The default width for the panel in pixels	string	false	"320"

Slots
Name	Description	Bindings
heading	Slot for heading	‐
content	Slot for displaying content in the navigation-panel	‐
default	Slot for displaying the primary content.	‐

`FLayoutRightPanel`

Props
Name	Description	Type	Required	Default
initialWidth	The default width for the panel in pixels	string	false	"320"
maxWidth	The default maximun width for the panel in percentage where 1 is 100% and 0 is 0%	number	false	0.5
minWidth	The default minium width for the panel in pixels	string	false	"150"

Slots
Name	Description	Bindings
default	Slot for displaying the primary content.	‐
heading	Slot for heading	‐
content	Slot for displaying content in the secondary-panel	‐

Kakor på webbplatsen

Applikationslayout