Notification

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

TER INFORMATIE

Voor de veiligheid

Vanwege de veiligheid sturen we u het wachtwoord en tokengenerator in 2 aparte enveloppen.

LET OP

Bevoegd gezag moet dit document ondertekenen

Zonder handtekening en kopie van het identiteitsbewijs van het bevoegd gezag nemen we de aanvraag niet in behandeling.

GELUKT

Aanvraag ontvangen

Wij hebben uw aanvraag ontvangen en nemen deze zo snel mogelijk in behandeling.

STORING

Er gaat iets niet helemaal lekker

De flux capacitor heeft de geest gegeven.

TER INFORMATIE

Voor de veiligheid

LET OP

Bevoegd gezag moet dit document ondertekenen

GELUKT

Aanvraag ontvangen

STORING

Er gaat iets niet helemaal lekker

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.

gelukt

Aanvraag ontvangen

Vanwege de veiligheid sturen we u het wachtwoord en tokengenerator in 2 aparte enveloppen.

gelukt

Aanvraag ontvangen

Vanwege de veiligheid sturen we u het wachtwoord en tokengenerator in 2 aparte enveloppen.

<script>
          let myNotification;
          let myNotification2;

          System.import('/uno/components/notification/notification.js').then(function (module) {
              myNotification = new module.Notification(document.getElementById('my-notification'));
              myNotification2 = new module.Notification(document.getElementById('my-notification2'));
          });
        </script>

Javascript API

Publieke methodes

Methode	Omschrijving
`closeAnimate()`	Sluit de notification
`openAnimate()`	Opent de notification

Benodigde stylesheets

/uno/components/notification/notification.css