Sidhuvud

Komponent: FPageHeader
Status: Produktionsklar

Innehåll

Egen logotyp och brytpunkt
Skiplink
API

Sidhuvud ska visas längst upp på applikationer som öppnas i ett eget webbläsarfönster. Den innehåller alltid Försäkringskassans logotyp och namnet på applikationen

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

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

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

Vid större skärmstorlekar visas hela Försäkringskassans logotyp med text och vid mindre visas en komprimerad variant med endast symbol.

I fall där applikationen innehåller flera olika sidor kan logotypen göras till en klickbar länk som leder användaren tillbaka till applikationens förstasida

Sidhuvudet kan också visa sekundär information till höger.

Egen logotyp och brytpunkt

<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>

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

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

<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>

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.

API

Props
Name	Description	Type	Required	Default
logoSize	Setting the logo sizes small, large or responsive.	string	false	"responsive"
skipLink	Render skiplink. When set to a non-empty string thethe skiplink feature is enabled. The string is the id of the element to move focus to. When set to `true` the deprecated `skipLinkHref` prop is used to set the element id to move focus to. When set to `false` or empty string the skiplink feature is disabled. Using a boolean is deprecated. Leave unset or a non-empty string.	string \| boolean	false	""
skipLinkHref	Target for skiplink.	string	false	"#applicationlayout-main-content"
headerTag	HTML element type for header.	string	false	"span"
routerLinkPath	Target for router-link via path. (Behaviour from using both name and path in combination is undefined.)	string	false	""
routerLinkName	Target for router-link via name. (Behaviour from using both name and path in combination is undefined.)	string	false	""
routerLinkLabel	Label to override the router-link label when router-link is present.	string	false	""

Slots
Name	Description	Bindings
skip-link-text	Slot for skip link text.	‐
logo	Slot for custom logo.	‐
default	Slot for application title.	‐
right	Slot for user/custom information display.	‐

Kakor på webbplatsen

Sidhuvud

Egen logotyp och brytpunkt

Skiplink

API