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;

          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