Divider Layout

Das divider-Tag fügt eine visuelle Trennlinie ein. Es kann verwendet werden, um Inhaltsabschnitte optisch voneinander zu trennen.

Funktionen

  • direction: Ausrichtung des Trennstrichs (horizontal/vertikal).

  • spacing: Rand um die Trennlinie unter Verwendung der Abstandsskala (xs/s/m/l/xl).

  • weight: Strichstärke (thin/medium/thick).

  • style: Linienstil (solid/dashed/dotted).

  • label: Optionaler Text, welcher in der Mitte des Trennzeichens angezeigt wird.

Verwendung

Die Komponente wird über das divider Tag eingebunden.

{% load layout_tags %} {% vbox gap="m" %} <p>Content above</p> {% divider %} <p>Content below</p> {% endvbox %} <!-- Vertical divider --> {% hbox gap="m" v_align="stretch" %} <div>Left</div> {% divider direction="vertical" %} <div>Right</div> {% endhbox %} <!-- With custom margin spacing --> {% divider spacing="xl" %} <!-- Line weight variations --> {% divider weight="thin" %} {% divider weight="medium" %} {% divider weight="thick" %} <!-- Line style variations --> {% divider style="solid" %} {% divider style="dashed" %} {% divider style="dotted" %} <!-- Combined: thick dashed divider --> {% divider weight="thick" style="dashed" %} <!-- With centered label --> {% divider label="or" %} {% divider label="Section" style="dashed" %} <!-- Vertical with rotated label --> {% divider direction="vertical" label="OR" %}

Parameter

Laden…

config (DividerConfig oder als kwargs oder als Kombination aus beidem)

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
direction str

Ausrichtung (horizontal|vertical).

 "horizontal" False
spacing str

Größe der Abstände (xs|s|m|l|xl).

 "m" False
weight str

Linienstärke (thin|medium|thick).

 "thin" False
style str

Linienstil (solid|dashed|dotted).

 "solid" False
label str

Optionale Beschriftung, welche in der Mitte angezeigt wird.

 "" False
{% load layout_tags %} {% divider direction="horizontal" spacing="m" weight="thin" style="solid" %} {% divider label="or" %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Trennstrich ist ein rein visuelles Element ohne semantische Bedeutung.

  • Screenreader überspringen das Trennelement.

  • Für die inhaltliche Trennung von Themen, ist die Verwendung von <hr> mit role='separator' für semantische vorzuziehen.

Offene Punkte

  • Die Attribute role='separator' und aria-orientation fehlen.

Verwandte Themen