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

Aperçu.

Label

Was macht die Komponente?

Ein Chip-Label ist eine kleine, rein visuelle Markierung mit kurzem Text, zum Beispiel ein Filtername oder ein Tag.

Wann soll die Komponente eingesetzt werden?

  • Um eine kurze Information oder Kategorie hervorzuheben, zum Beispiel «Angebot».
 Anwendung

Regeln.

  • Der Text ist kurz und prägnant.
  • Der Text steht immer in einer Zeile.
  • Ein Chip-Label ist nicht klickbar.

Spécification.

Ouvrir dans Figma
Beispiele 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

Web Components.

Le web component se trouve dans le paquet @sbb-esta/lyne-elements.

Storybook avec exemples interactifs Code source sur GitHub

Documentation.

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>

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

Aperçu Angular API Angular Exemples Angular API

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.