Badge
Synonyme: Beschriftung, Status-Anzeige, Label
Beschreibung: Die Badge-Komponente hebt bestimmte Informationen optisch hervor. Sie unterstützt die Angabe einer Hintergrundfarbe mit automatischer Berechnung der Textfarbe für optimalen Kontrast, die optionale Hinzufügung eines Icons und eine flexible Gestaltung durch externe CSS-Anpassungen.
Beispiel
Darstellung eines einfachen Badges mit Hintergrundfarbe und Icon:
<KolBadge _color="#0c8703" _icons="kolicon-check" _label="Badge" />Barrierefreiheit
- Automatischer Kontrast: Die Textfarbe wird automatisch basierend auf der Hintergrundfarbe berechnet und ist entweder Schwarz oder Weiß, um einen optimalen Kontrast sicherzustellen.
- Icon-Unterstützung: Die Ausgabe eines Icons gewährleistet, dass auch visuelle Informationen zusätzlich zur Textinformation erfasst werden können.
- Label erforderlich: Jedes Badge muss ein Label über das Attribut
_labelhaben, damit die Information auch für Screenreader verfügbar ist. - Kontextbindung: Badges sollten immer im Kontext einer aussagekräftigen Überschrift verwendet werden, nicht isoliert.
Links und Referenzen
Verwendung
Best Practices / Empfehlungen
- Verwenden Sie Badges, um wichtige Informationen in unmittelbarer Nähe des jeweiligen Elements anzuzeigen.
- Verwenden Sie Badges, um auf geänderte Werte oder einen geänderten Status aufmerksam zu machen.
- Badges können darauf hinweisen, dass etwas neu hinzugekommen oder aktualisiert wurde, z. B. „Neu", „Aktualisiert" oder ähnliches.
- Behalten Sie die Position des Badges konsistent bei, um ein einheitliches Erscheinungsbild zu gewährleisten.
- Setzen Sie für den
_color-Wert eine hexadezimale Farbe (z. B.#0c8703), um automatische Kontrastberechnung zu nutzen. - Vermeiden Sie es, Badges isoliert anzuzeigen; binden Sie sie immer in einen aussagekräftigen Kontext ein.
Anwendungsfälle
- Status-Kennzeichnung (z. B. „Neu", „Aktiv", „Inaktiv")
- Nummerierungen in mehrstufigen Prozessen oder Checklisten
- Benachrichtigungszähler oder Aktivitätsindikatoren
- Kategorie-Zuordnung oder Tagging
- Bestätigung oder Erfolgsbestätigung in Formularen
- Visuelles Highlighting von wichtigen Informationen nebeneinander mit anderen Elementen
Konstruktion / Technik
Playground
<KolBadge _color="#0c8703" _label="Badge" />Funktionalitäten (mit Code)
Label
Das Label ist erforderlich und definiert den Text, der im Badge angezeigt wird. Der Text kann Sonderzeichen, Umlaute und Leerzeichen enthalten.
<KolBadge _color="#0c8703" _label="Beispieltext" />| Property | Beschreibung |
|---|---|
_label | Der anzuzeigende Text im Badge (erforderlich) |
Farben
Die Hintergrundfarbe wird über das Attribut _color definiert. Die Textfarbe wird automatisch berechnet und ist entweder Weiß oder Schwarz, um optimalen Kontrast zu gewährleisten. Eine explizite Angabe der Textfarbe ist nicht möglich.
<KolBadge _color="#b7e4b4" _label="Helles Badge" />| Property | Beschreibung | Default |
|---|---|---|
_color | Hintergrundfarbe als Hex-Wert oder Objekt mit backgroundColor und foregroundColor | '#000' |
Icons
Icons können als String (Klassenname) oder als komplexes Icon-Objekt mit horizontalen und vertikalen Positionen übergeben werden.
<KolBadge _color="#0c8703" _icons="kolicon-house" _label="Mit Icon" />| Property | Beschreibung |
|---|---|
_icons | Icon-Klassenname(n) oder Icon-Konfigurationsobjekt |
Smart Button
Das Badge kann mit einem Smart-Button verknüpft werden, der eine Aktion auslöst. Dies wird nur mit _hide-label angezeigt.
<KolBadge _color="#0c8703" _label="Mit Button" />| Property | Beschreibung |
|---|---|
_smartButton | Button-Konfiguration für eine Aktion innerhalb des Badges |
API
Overview
The Badge component allows you to visually highlight specific information. In addition to specifying the background color and automatically calculating the text color, it also supports adding an icon and/or a different font style.
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
_color | _color | Defines the backgroundColor and foregroundColor. | string | undefined | { backgroundColor: string; foregroundColor: string; } | '#000' |
_icons | _icons | Defines the icon classnames (e.g. _icons="fa-solid fa-user"). | KoliBriHorizontalIcons & KoliBriVerticalIcons | string | undefined | undefined |
_label (required) | _label | Defines the visible or semantic label of the component (e.g. aria-label, label, headline, caption, summary, etc.). | string | undefined |
_smartButton | _smart-button | Allows to add a button with an arbitrary action within the element (_hide-label only). | string | undefined | { _label: string; } & { _on?: ButtonCallbacksPropType<StencilUnknown> | undefined; _type?: "button" | "reset" | "submit" | undefined; _ariaExpanded?: boolean | undefined; _tabIndex?: number | undefined; _value?: StencilUnknown; _accessKey?: string | undefined; _role?: "tab" | "treeitem" | undefined; _ariaControls?: string | undefined; _ariaDescription?: string | undefined; _ariaSelected?: boolean | undefined; _customClass?: string | undefined; _disabled?: boolean | undefined; _hideLabel?: boolean | undefined; _icons?: IconsPropType | undefined; _id?: string | undefined; _inline?: boolean | undefined; _name?: string | undefined; _shortKey?: string | undefined; _syncValueBySelector?: string | undefined; _tooltipAlign?: AlignPropType | undefined; _variant?: string | undefined; } | undefined |
Methods
focus
focus() => Promise<void>
Sets focus on the internal element.
Returns
Type: Promise<void>