Sidhuvud

Komponent: FPageHeader
Status: Produktionsklar

Innehåll

Logotyp
Sekundär information
Skiplink
API

Sidhuvud ska visas längst upp på applikationer som öppnas i ett eget webbläsarfönster. Den kan innehålla en logotyp, applikationsnamn samt sekundär information.

<script lang="ts">
import { defineComponent } from "vue";
import { FLogo, FPageHeader } from "@fkui/vue";

export default defineComponent({
    name: "FPageHeaderDefault",
    components: { FPageHeader, FLogo },
});
</script>

<template>
    <f-page-header>
        Exempelapplikation
        <template #logo>
            <f-logo size="small">Example logo text</f-logo>
        </template>
        <template #right> Namn Namnsson </template>
    </f-page-header>
</template>

Logotyp

För att lägga till en logotyp använd slot logo. Du kan med fördel använda FLogo för att ange logotyp.

 <f-page-header>
+    <template #logo>
+        <f-logo>Awesome logo</f-logo>
+    </template>
 </f-page-header>

Du kan också göra en länkad logo med att använda en a-tagg (eller router-link om du använder Vue Router).

 <f-page-header>
     <template #logo>
+        <a href="/">
             <f-logo>Awesome logo</f-logo>
+        </a>
     </template>
 </f-page-header>

Se även nedan exempel för hur du kan göra en egen logotyp med brytpunkt utan att använda FLogo.

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

export default defineComponent({
    name: "FPageHeaderCustomLogo",
    components: { FPageHeader },
});
</script>

<template>
    <f-page-header>
        Exempelapplikation
        <template #right> Namn Namnsson </template>
        <template #logo>
            <span class="my-own-logos" aria-label="Annan logotyp" role="img"> </span>
        </template>
    </f-page-header>
</template>

<style>
.my-own-logos {
    display: inline-block;
    box-sizing: border-box;
    background-repeat: no-repeat;
    background-position: center;
    padding: 0.8rem;
    min-width: 12.6rem;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='39'><rect fill='lightgrey' x='0' y='0' width='100%' height='100%'/></svg>");
    border: 2px solid yellow;
}
@media only screen and (max-width: 639px) {
    .my-own-logos {
        min-width: 0.8rem;
        width: 0.8rem;
        padding: 0.8rem;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='134' height='150'><rect fill='grey' x='0' y='0' width='100%' height='100%'/></svg>");
        border: 2px solid red;
    }
}
</style>

Sekundär information

Slotten right kan användas för att visa information som till exempel namn på inloggad användare.

 <f-page-header>
+    <template #right>
+        Namn Namnsson
+    </template>
 </f-page-header>

Skiplink är en särskild länk som fungerar som det första tabbningsbara elementet och visas endast när det fokuserats. Syftet är att snabbt låta en tangenbordsnavigerande användare hoppa till det primära innehållet utan att navigera genom navigeringsmenyer osv.

Skiplink aktiveras genom att sätta skipLink till det id som innehåller det primära innehållet:

 <header>
     <f-page-header
+        skip-link="awesome-id"
     </f-page-header>
 </header>
+<main>
+    <h1 id="awesome-id" tabindex="-1">
+</main>

Notera att elementet måste vara fokuserbart.