Kode

Notifikation (Toast)

Eksempler og retningslinjer

• Retningslinjer
• Eksempler

Installation

HTML Struktur

<div class="toast toast-info show" id="notification-info" role="status">
    <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 notifikation.

Bemærk at ovenstående har class show som default. Der følger en animation med når en notifikation 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 notifikation bør have class hide fra start.

Placering

Notifikationer placeres i en div med class toast-container. Denne div placeres efter body.

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

Javascript

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

Vis

Når en notifikation 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 notifikation skjules ændre 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"
    role="status">
    <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"
    role="status">
    <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" role="status">
    <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" role="status">
    <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>