Toastbesked

• Succes
• Advarsel
• Fejl
• Information

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<div class="toast toast-info show" id="notification-info"
    aria-live="assertive" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p class="bold">Du har fået en besked</p>
        <button class="toast-close">Luk</button>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

Kopiér ovenstående kode for at indsætte én toastbesked.

Bemærk at ovenstående har class show som default. Der følger en animation med når en toastbesked vises, som kommer ved at man ændrer klasserne i følgende flow:

1. hide
2. showing
3. show

Ved at bruge nedenstående javascript vil dette komme ud af boksen. Men bemærk at en toastbesked bør have class hide fra start.

Placering

Toastbeskeder placeres i en div med class toast-container og attributter aria-live="assertive", aria-atomic="false" og aria-relevant="additions". Denne div placeres som første element i <main>.

<main id="main-content">
    <div class="toast-container" aria-live="assertive" aria-atomic="false" aria-relevant="additions">
        <!-- Placer toastbeskeder her -->
    </div>
    ...
</main>

Se fungerende eksempel på implementering af toastbesked i et nyt vindue

Javascript

Der medfølger Javascript til komponenten, som man kan vælge at bruge.

Vis

Når en toastbesked vises, ændres class fra hide til showing og til sidst show.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.show();

Skjul

Når en toastbesked skjules, ændres class fra show til hide.

let toast = new DKFDS.Toast(document.getElementById('TOAST-ID'));
toast.hide();

Varianter

Succes

<div class="toast toast-success show" id="notification-success"
    aria-live="assertive" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p class="bold">Din ansøgning er afsendt</p>
        <button class="toast-close">Luk</button>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

Advarsel

<div class="toast toast-warning show" id="notification-warning"
    aria-live="assertive" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p class="bold">Dette er en advarsel</p>
        <button class="toast-close">Luk</button>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

Fejl

<div class="toast toast-error show" id="notification-error"
    aria-live="assertive" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p class="bold">Der opstod en fejl</p>
        <button class="toast-close">Luk</button>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>

Information

<div class="toast toast-info show" id="notification-info"
    aria-live="assertive" aria-atomic="true">
    <div class="toast-icon"></div>
    <div class="toast-message">
        <p class="bold">Du har fået en besked</p>
        <button class="toast-close">Luk</button>
        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem
            accusantium doloremque laudantium.</p>
    </div>
</div>