Vælg et tema
Vælger du ikke et tema, vælger vi et for dig. Du kan efterfølgende skifte tema i footeren.
Toastbesked
Eksempler og retningslinjer
Installation
HTML Struktur
<div class="toast toast-info show" aria-atomic="true">
<div class="toast-icon"></div>
<div class="toast-message">
<p><span class="sr-only">Information:
</span><strong id="notification-info-heading">Du har fået en besked</strong></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium.</p>
<button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
</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:
hide
showing
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" aria-atomic="true">
<div class="toast-icon"></div>
<div class="toast-message">
<p><span class="sr-only">Succes:
</span><strong id="notification-success-heading">Din ansøgning er afsendt</strong>
</p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium.</p>
<button class="toast-close"
aria-describedby="notification-success-heading">Luk</button>
</div>
</div>
Advarsel
<div class="toast toast-warning show" aria-atomic="true">
<div class="toast-icon"></div>
<div class="toast-message">
<p><span class="sr-only">Advarsel:
</span><strong id="notification-warning-heading">Dette er en advarsel</strong></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium.</p>
<button class="toast-close"
aria-describedby="notification-warning-heading">Luk</button>
</div>
</div>
Fejl
<div class="toast toast-error show" aria-atomic="true">
<div class="toast-icon"></div>
<div class="toast-message">
<p><span class="sr-only">Fejl:
</span><strong id="notification-error-heading">Der opstod en fejl</strong></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium.</p>
<button class="toast-close" aria-describedby="notification-error-heading">Luk</button>
</div>
</div>
Information
<div class="toast toast-info show" aria-atomic="true">
<div class="toast-icon"></div>
<div class="toast-message">
<p><span class="sr-only">Information:
</span><strong id="notification-info-heading">Du har fået en besked</strong></p>
<p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium
doloremque laudantium.</p>
<button class="toast-close" aria-describedby="notification-info-heading">Luk</button>
</div>
</div>