Dokumentation und Beispiele für Badges, unsere Small-Count- und Labeling-Komponente.
Beispiel
Badges werden so skaliert, dass sie der Größe des unmittelbar übergeordneten Elements entsprechen, indem relative Schriftgrößen und emEinheiten verwendet werden.
Beispielüberschrift
Neu
Beispielüberschrift
Neu
Beispielüberschrift
Neu
Beispielüberschrift
Neu
Beispielüberschrift
Neu
Beispielüberschrift
Neu
Abzeichen können als Teil von Links oder Schaltflächen verwendet werden, um einen Zähler bereitzustellen.
Beachten Sie, dass Badges je nach Verwendungszweck für Benutzer von Screenreadern und ähnlichen Hilfstechnologien verwirrend sein können. Während das Design von Abzeichen einen visuellen Hinweis auf ihren Zweck bietet, wird diesen Benutzern einfach der Inhalt des Abzeichens präsentiert. Abhängig von der spezifischen Situation können diese Abzeichen wie zufällige zusätzliche Wörter oder Zahlen am Ende eines Satzes, Links oder einer Schaltfläche erscheinen.
Wenn der Kontext nicht klar ist (wie im Beispiel „Benachrichtigungen“, wo die „4“ die Anzahl der Benachrichtigungen ist), ziehen Sie in Betracht, zusätzlichen Kontext mit einem visuell verborgenen zusätzlichen Text hinzuzufügen.
Kontextuelle Variationen
Fügen Sie eine der unten genannten Modifikatorklassen hinzu, um das Aussehen eines Abzeichens zu ändern.
Die Verwendung von Farbe, um Bedeutung hinzuzufügen, bietet nur einen visuellen Hinweis, der Benutzern von Hilfstechnologien – wie z. B. Bildschirmlesegeräten – nicht vermittelt wird. Stellen Sie sicher, dass die durch die Farbe gekennzeichneten Informationen entweder aus dem Inhalt selbst ersichtlich sind (z. B. der sichtbare Text) oder durch alternative Mittel enthalten sind, z. B. durch zusätzlichen Text, der mit der .sr-onlyKlasse verborgen ist.
Pillenabzeichen
Verwenden Sie die .badge-pillModifikatorklasse, um Abzeichen runder zu machen (mit einem größeren border-radiusund zusätzlichen horizontalen padding). Nützlich, wenn Sie die Abzeichen von v3 vermissen.