Cette page n'est pas disponible dans la langue souhaitée. Langues disponibles: Deutsch English Chip-Label. Info

Was macht die Komponente?

Ein Chip-Label ist ein kompaktes Text-Element.

Wann soll die Komponente eingesetzt werden?

  • Um kurze, prägnante Informationen anzuzeigen.

Regeln.

  • Ein Chip-Label soll klar und kurz beschriftet sein.
  • Das Label darf nicht zu lang sein und ist immer einzeilig darzustellen.
  • Chips sollen genügend Abstand zueinander haben, um eine klare Trennung und einfache Bedienung zu ermöglichen.
 Anatomie

Anatomie der Komponente


Nummer Typ Beschreibung Optional Hinweis
1 Text Label Nein
Demo

Spielwiese.

Label
Farbe Charcoal Milk Granite White Grössen XXXS XXS XS S Mode (System-Einstellung) Light Dark Hintergrund White Midnight Milk Charcoal Cloud Iron Midnight White Charcoal Milk Iron Cloud
XXXS.
Auf Storybook ausprobieren HTML einblenden
XXS.
Auf Storybook ausprobieren HTML einblenden
XS.
Auf Storybook ausprobieren HTML einblenden
S.
Auf Storybook ausprobieren HTML einblenden
Charcoal.
Auf Storybook ausprobieren HTML einblenden
White.
Auf Storybook ausprobieren HTML einblenden
Granite.
Auf Storybook ausprobieren HTML einblenden
Fixed Width.
Auf Storybook ausprobieren HTML einblenden
Fixed Width Long Label.
Auf Storybook ausprobieren HTML einblenden
HTML in Zwischenablage kopiert. Implementation

The <sbb-chip-label> is a visual component used to display compact information, like a filter's name or a tag.

<sbb-chip-label>On sale</sbb-chip-label>

Style.

It's possible to choose among different values for the size property (xxxs, xxs (default), xs, and s),
and four different values for the color property (charcoal, granite, white and milk, which is the default).

<sbb-chip-label color="charcoal" size="s">Label</sbb-chip-label>

<sbb-chip-label color="granite" size="xs">Label</sbb-chip-label>

<sbb-chip-label color="white">Label</sbb-chip-label>

API Documentation.

class: SbbChipLabelElement, sbb-chip-label.

Properties.

Name Attribute Privacy Type Default Description
color color public 'milk' | 'charcoal' | 'white' | 'granite' 'milk' Color of the chip.
size size public 'xxxs' | 'xxs' | 'xs' | 's' 'xxs' Size of the chip.

Slots.

Name Description
Use the unnamed slot to add content to the sbb-chip-label.