Message counter

Introductie

De Message counter is bedoeld om de gebruiker te attenderen en te informeren over nieuwe berichten of notificaties.

Snelstart

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

Benodigde stappen

  • Voeg de class message-counter toe om het aantal berichten visueel weer te geven als een Message counter.
  • Overweeg of het nodig is een toegankelijk label toe te voegen.
    • Is uit context duidelijk waar de teller bij hoort? Bijvoorbeeld in een link zoals: <a href="message-counter">Berichten <span class="message-counter">42</span></a>, 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

Voorbeeld: Als los element

1
    
    <span class="message-counter" aria-label="Nieuwe berichten">1</span>

Voorbeeld: In een link

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

Voorbeeld: Als een link

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

Voorbeeld: Lang getal

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