Meddelanderuta

Komponent: FMessageBox
Status: Produktionsklar

Innehåll

Copy
Banner
Meddelanderuta med länk och ikon
Skärmläsare
API

Använd en meddelanderuta för att uppmärksamma användare på viktig information, varningar eller fel. En meddelanderuta kan visas inför att användaren ska använda en tjänst eller fylla i ett formulär samt som en reaktion på att användaren gör ett val i ett formulär eller trycker på en knapp.

Använd ett kort meddelande när du inte behöver en rubrik för att förtydliga informationen i meddelandet. Ett kort meddelande används ofta som en följd av att användaren har gjort ett visst val på samma sida.

Använd en stor meddelanderuta när du vill uppmärksamma användaren på extra viktig information som hen behöver känna till eller agera på. En stor meddelanderuta har alltid en rubrik. Rubrik ska sättas till rätt nivå utifrån var meddelanderutan placeras. Rubriknivån påverkar inte rubrikens styling. Rubriken ska beskriva kärnfrågan så tydligt som möjligt. Ord som “information” ska inte användas i en rubrik.

Informationsmeddelanden används för att förmedla extra viktig information som gäller alla eller majoriteten av besökarna på sidan.
Varningsmeddelanden används för att uppmärksamma användaren på sådant som är viktigt att veta och som kan kräva att användaren agerar i ett senare skede.
Felmeddelanden används för att informera användaren om kritiska och stoppande fel och vad användaren behöver göra för att kunna fortsätta.
Positiv återkoppling används för att informera användaren när denne har gjort vad som behövs och att resultatet var lyckat.

Copy

Informationsmeddelande (blått)

Fundera först på om meddelandet behövs överhuvudtaget eller om informationen passar bättre i någon annan del av informationsprocessen (t.ex. i en ingress på samma sida). Rubriken bör oftast beskriva kärnfrågan så tydligt som möjligt. Men om det inte är nödvändigt kan man använda rubriken för att jobba med tonaliteten.

Varningsmeddelande (gult)

Rubriken bör tydligt och direkt beskriva vad användaren ska tänka på, eller vad som är problem med val som användaren gjort. Tidigare har vi använt rubriken Tänk på att... men vi strävar efter att arbeta bort det. Exempel Har du fått ny lön? Dina inkomstuppgifter är äldre än ett år. Kolla att de fortfarande stämmer. Du har redan ansökt om ersättning för den här dagen Du har redan ansökt om 100 procent vab för den här dagen.

Felmeddelande (rött)

Rubriken bör tydligt och direkt beskriva vad som är fel. Brödtexen bör beskriva vad användaren kan göra för att lösa problemet.

Exempel

Innan du går vidare Oj, du har missat något. Gå till:

Dagar och tid
Kompletterande frågor om vab-dagarna

<template>
    <f-message-box type="error" banner>
        <p>
            Det verkar som att du inte har någon internetuppkoppling just nu. Tänk på att du behöver
            uppkoppling för att kunna signera
        </p>
    </f-message-box>
</template>

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

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

Meddelanderuta med länk och ikon

<template>
    <f-message-box type="info">
        <template #default="{ headingSlotClass }">
            <h2 :class="headingSlotClass">Meddelanderuta med länk och ikon i meddelande</h2>
            <p>
                <a class="anchor" href="javascript:" target="_blank">
                    Länk
                    <span class="sr-only"> öppnas i nytt fönster </span>
                </a>
                <f-icon name="new-window"></f-icon>
            </p>
        </template>
    </f-message-box>
</template>

<script>
import { defineComponent } from "vue";
import { FMessageBox, FIcon } from "@fkui/vue";

export default defineComponent({
    name: "FMessageBoxIconLink",
    components: { FMessageBox, FIcon },
});
</script>

Skärmläsare

Komponenten har inbyggda texter för skärmläsare som är anpassade efter vilken typ av meddelande som visas. För typen "info" läser den till exempel upp "Informationsmeddelande". Om applikationen inte önskar detta beteende och själv vill redogöra för detta går det att stänga av.

<template>
    <f-message-box type="info" :provide-screen-reader-context="false">
        <template #default="{ headingSlotClass }">
            <h2 :class="headingSlotClass">
                En rubrik som fristående tydligt förklarar sin kontext när den får fokus
            </h2>
            <p>Komponenten kommer vid fokus inte längre att läsa texten Informationsmeddelande.</p>
        </template>
    </f-message-box>
</template>

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

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

<template>
    <f-message-box type="info" :provide-screen-reader-context="false">
        <template #default="{ headingSlotClass }">
            <h2 :class="headingSlotClass">
                <span class="sr-only"> Skärmläsarinformation kombinerad med befintlig titel </span>
                En rubrik som kombineras med en skärmläsartext för att tydligt förklara sin kontext
                när den får fokus
            </h2>
            <p>Komponenten kommer vid fokus inte längre att läsa texten Informationsmeddelande.</p>
        </template>
    </f-message-box>
</template>

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

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

<template>
    <f-message-box type="info" :provide-screen-reader-context="false">
        <template #default="{ headingSlotClass }">
            <h2 :class="headingSlotClass">
                <span class="sr-only">
                    Skärmläsarinformation som fullständigt ersätter rubriken och som innehåller
                    tydlig kontext
                </span>
                <span class="aria-hidden"> En rubrik som inte förklarar sin kontext </span>
            </h2>
            <p>Komponenten kommer vid fokus inte längre att läsa texten Informationsmeddelande.</p>
        </template>
    </f-message-box>
</template>

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

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

API

Props
Name	Description	Type	Required	Default
type	Type of message-box. 'success', 'error', 'warning' and 'info' is valid.	string	true	‐
banner	If message-box should be a banner. If prop is not used message-box will have default styling.	boolean	false	‐
provideScreenReaderContext	It is important to provide a context for a screenreader, similar to a modal that initially outputs it is a dialog. Type-specific screenreader context is output by default in this component. By setting this property to false no context will be output. Note that by doing this, it is the applications responsiblity to provide a clear context.	boolean	false	true
layout	Select standard or short layout. 'normal' - Use normal layout when need for heading and/or longer text/multiple sentences 'short' - Use short layout when only need for shorter text	string	false	"standard"

Slots
Name	Description	Bindings
default	Slot for displaying content.	headingSlotClass

Kakor på webbplatsen

Meddelanderuta