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

Aperçu.

Horizontal
Vertical

Was macht die Komponente?

Ein Divider ist eine Trennlinie. Er grenzt Inhalte oder Abschnitte visuell voneinander ab. Er ist horizontal oder vertikal möglich.

Wann soll die Komponente eingesetzt werden?

  • Um logisch getrennte Inhalte oder Gruppen von Elementen voneinander abzugrenzen.
  • Wenn Abstand allein nicht genügt, um die Struktur zu verdeutlichen.
 Anwendung

Regeln.

  • Ein Divider ist dezent und stört den Lesefluss nicht. Setze ihn sparsam ein.
  • Er hat genügend Abstand zu den umgebenden Elementen.
  • Auf dunklem Hintergrund wird die negative Variante verwendet.
  • Ein Divider ist rein visuell. Die Struktur der Seite entsteht durch Überschriften und Abschnitte.

Spécification.

Ouvrir dans Figma
Beispiele Divider Horizontal.
Auf Storybook ausprobieren HTML einblenden
Divider Vertical.
Auf Storybook ausprobieren HTML einblenden
Divider Negative.
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-divider> is used to visually divide sections.

Style.

Based on the orientation property, the <sbb-divider> can be displayed vertically or horizontally.

It's also possible to display the component in negative variant using the self-named property.

<sbb-divider orientation="vertical"></sbb-divider>

<sbb-divider negative></sbb-divider>

Angular.

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

Aperçu Angular API Angular Exemples Angular API

class: SbbDividerElement, sbb-divider.

Properties.

Name Attribute Privacy Type Default Description
negative negative public boolean false Negative coloring variant flag.
orientation orientation public 'horizontal' | 'vertical' 'horizontal' Orientation property with possible values 'horizontal' | 'vertical'. Defaults to horizontal.