Gå til sidens indhold

Vælg et tema

Luk

Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.


Kode

Notifikation (Toast)

Din ansøgning er afsendt

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium.

Eksempler og retningslinjer

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

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

Fejl

<div class="toast toast-error show" id="notification-error" 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>

Information

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