lux‐badge v18 - IHK-GfI/lux-components GitHub Wiki

LUX-Badge

Beispielbild LUX-Badge

Overview / API

Allgemein

Name Beschreibung
import LuxCommonModule
selector lux-badge

@Input

Name Typ Beschreibung
luxUppercase boolean Bestimmt ob der Text innerhalb der Badge nur mit Großbuchstaben dargestellt wird.
luxIconName string Enthält den Namen des Icons, welches für die Badge angezeigt werden soll (z.B. 'lux-interface-setting-menu-1').
luxColor LuxBadgeColor Bestimmt die Hintergrundfarbe und davon abhängig die Schrift- farbe des Badges.

ng-content

Name Typ Beschreibung
lux-label Die Bezeichnung des Badges.

Beispiel

Beispielbild 01

Html

<lux-badge luxIconName="lux-interface-user-single" luxColor="red">
  <lux-label luxId="Badge_red">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single" luxColor="blue">
  <lux-label luxId="Badge_blue">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single" luxColor="green">
  <lux-label luxId="Badge_green">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single" luxColor="gray">
  <lux-label luxId="Badge_gray">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single" luxColor="orange">
  <lux-label luxId="Badge_orange">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single" luxColor="brown">
  <lux-label luxId="Badge_brown">Badge</lux-label>
</lux-badge>
<lux-badge luxIconName="lux-interface-user-single">
  <lux-label luxId="Badge_no_color">Badge ohne Farbe</lux-label>
</lux-badge>
<lux-badge luxColor="red" [luxUppercase]="false">
  <lux-label luxId="Badge_no_icon">Badge ohne Icon</lux-label>
</lux-badge>
⚠️ **GitHub.com Fallback** ⚠️