Questa pagina non è disponibile nella lingua desiderata. Lingue disponibili: Deutsch English Chip-Label. Übersicht

Anteprima.

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.

Specifica.

Apri in 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.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Storybook con esempi interattivi Codice sorgente su GitHub

Documentazione.

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.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

Panoramica Angular API Angular Esempi 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.