Angular Badges-Bibliothek | ng-hub-ui-badges
Semantische Angular-Badges für Status, Zähler und entfernbare Filter-Tags, mit CSS-Variablen und öffentlichen SCSS-Mixins für eigene Farbfamilien.
Interaktive Beispiele
Erkunde Live-Beispiele, die zeigen, wie sich die Bibliothek in gängigen Angular-Anwendungsfällen verhält.
Semantische Matrix
Die zentrale Badge-Oberfläche: semantische Farben in den Varianten solid, soft, outline, ghost, subtle und surface.
Semantische Matrix
Größe & Form
Kompakte XS-Tags, großzügigere LG-Pills und drei Gehäuseformen für dichte Tabellen oder großzügige Dashboards.
Größe & Form
Status & Zähler
Statuspunkte, Alarmzähler, Icon-Badges und leichte Metadaten-Pills aus derselben Primitive.
Status & Zähler
Entfernbare Filter
Schließbare Tags für aktive Filter, eingegrenzte Such-Pills und leichte Token-UIs.
Entfernbare Filter
Offenes semantisches Theming
Die integrierten Farben lesen die gemeinsamen Design-System-Tokens, während eigene Akzente über die öffentlichen SCSS-Mixins eingebunden werden.
Offenes semantisches Theming
Kürzung & Tooltip
Lange Beschriftungen werden mit Auslassungspunkten gekürzt und beim Hover angezeigt — über das native title oder den hub-ui-Tooltip, sofern eingerichtet.
Kürzung & Tooltip
Filter-Chips
Umschaltbare hub-chip-Tags, koordiniert durch hub-chip-set für Einfach- oder Mehrfachauswahl, unter Wiederverwendung des Badge-Akzent-Themings.
Interaktive Filter-Chips
Chip-Farben
Die neun eingebauten Akzente auf einem Chip, dazu ein eigenständiger Zwei-Wege-Umschalter, ein entfernbares Tag und ein deaktivierter Chip — alle außerhalb eines Chip-Sets.
Chip-Farben
selected)