Notificatie-teller

De notificatie-teller is bedoeld om de gebruiker te attenderen en te informeren over nieuwe berichten of notificaties.

  • Voeg de class "message-counter" toe om het aantal berichten visueel weer te geven als een notificatie-teller.
  • Overweeg of het nodig is een toegankelijk label toe te voegen.
    • Let op: in vorige versies van deze documentatie werd aangeraden om de notificatie-teller een aria-label te geven. Dat was incorrect.
    • Is uit context duidelijk waar de teller bij hoort? Bijvoorbeeld in een link zoals: Berichten 42, of in een tabel met duidelijke headers? Dan is het niet nodig een extra label toe te voegen.
    • Wordt de teller gebruikt in combinatie met bijvoorbeeld een icoon? Zorg dan dat het icoon een duidelijk tekst-alternatief heeft.

Voorbeelden

Als los element

Visueel voorbeeld

1

HTML-voorbeeld

<span class="message-counter">1</span>

In een link

Visueel voorbeeld

Berichten 42

HTML-voorbeeld

<a href="message-counter">Berichten <span class="message-counter">42</span></a>

Lang getal

Visueel voorbeeld

12.830

HTML-voorbeeld

<span class="message-counter">12.830</span>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

@use "@minvws/manon/message-counter-base";

Instelbare variabelen