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

Was macht die Komponente?

Ein Divider ist eine visuelle Trennungslinie, die Inhalte oder Abschnitte innerhalb einer Seite oder eines Inhaltsblocks voneinander abgrenzt.

Wann soll die Komponente eingesetzt werden?

  • Um visuelle Trennung zwischen unterschiedlichen Inhalten oder Abschnitten zu schaffen.
  • Um die Struktur und Lesbarkeit von Inhalten zu verbessern.
  • Um logische Gruppen von Elementen zu trennen und die Informationshierarchie zu verdeutlichen.

Regeln.

  • Ein Divider soll dezent und unaufdringlich sein, um den Lesefluss nicht zu stören
  • Die Länge und Ausrichtung des Dividers sollen dem umgebenden Layout und den Inhalten angepasst sein (horizontal oder vertikal)
  • Achte darauf, dass der Divider genügend Abstand zu den umgebenden Elementen hat, um seine Funktion als Trennelement zu erfüllen
Anatomie

Anatomie der Komponente


Demo Divider Horizontal.
Divider Vertical.
Divider Negative.
HTML in Zwischenablage kopiert.
Implementation

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>

API Documentation.

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.