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

Anteprima.

Orizzontale
Verticale

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.

Specifica.

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

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

Storybook con esempi interattivi Codice sorgente su GitHub

Documentazione.

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.

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

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