Met een notificatie breng je de gebruiker op de hoogte van een gebeurtenis
Een notificatie kan betrekking hebben op de actie die de gebruiker op dat
moment uitvoert. In dat geval dient de notificatie inline getoond te
worden.
Wanneer een notificatie betrekking heeft op de gehele DUO omgeving (algehele
storing), dan wordt de notificatie onder de navigatie getoond. In dat geval
plaats je de notificatie als eerste element boven de main
container.
Een .notification
trekt de aandacht van de gebruiker. Er zijn 4
soorten notificaties:
.notification--success
voor als een actie geslaagd is.notification--info
om een gebruiker te informeren.notification--warning
om een gebruiker te waarschuwen.notification--error
om een gebruikter te laten weten dat er iets fout is gegaan
Sluitbare notificaties
Indien een gebruiker de notificatie weg moet kunnen klikken, kan er een sluit button aan de notificatie worden toegevoegd. Er kunnen meerdere notificaties met sluitbutton onder elkaar worden gezet. Na zeven seconden verdwijnt de sluitbare notificatie automatisch.
Vanwege de veiligheid sturen we u het wachtwoord en tokengenerator in 2 aparte enveloppen.
Vanwege de veiligheid sturen we u het wachtwoord en tokengenerator in 2 aparte enveloppen.
<script>
let myNotification;
System.import('/uno/components/notification/notification.js').then(function (module) {
myNotification = new module.Notification(document.getElementById('my-notification'));
myNotification.openAnimate(7000);
});
</script>
Javascript API
Publieke eigenschappen
Eigenschap | Type | Omschrijving |
---|---|---|
ms |
number | Het aantal miliseconden dat de notificatie open blijft staan. (Default: altijd open) |
Publieke methodes
Methode | Omschrijving |
---|---|
closeAnimate() |
Sluit de notification |
openAnimate(ms) |
Opent de notification |
Benodigde stylesheets
/uno/components/notification/notification.css