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

HTML-voorbeeld

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

In een link

Visueel voorbeeld

HTML-voorbeeld

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

Lang getal

Visueel voorbeeld

HTML-voorbeeld

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

Instelbare variabelen

• padding
• border-radius
• font-size
• background-color
• text-color
• height
• min-width
• border-width
• border-style
• border-color

Benodigde bestanden

• message-counter/message-counter-base.scss
• message-counter/message-counter-base-variables.scss