Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Kode
Notifikation (Toast)
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">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:
hide
showing
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>