Hbox Layout

Das hbox-Block-Tag erstellt einen horizontalen Flex-Container. Untergeordnete Elemente werden horizontal angeordnet, wobei Abstand, Ausrichtung und Ausrichtung konfigurierbar sind.

WCAG AA
Block Tag

Funktionen

  • gap: Gleichmäßiger Abstand zwischen den Untergrößen (xs/s/m/l/xl).

  • padding: Innerer Seitenabstand (XS/S/M/L/XL). Optional.

  • max_width: Maximale Breite des Containers (xs/s/m/l/xl/fit/full).

  • full_height: Füllt die verfügbare Höhe im übergeordneten Container aus.

  • h_align: Horizontale Ausrichtung (start/center/end/between/around/evenly).

  • v_align: Vertikale Ausrichtung (start/center/end/stretch/baseline).

  • wrap: Optionaler Flex-Wrap für responsive Layouts.

Verwendung

Die Komponente wird über das hbox Tag eingebunden.

{% load layout_tags %} {% hbox gap="s" v_align="center" h_align="between" %} <span>Left</span> <span>Right</span> {% endhbox %} <!-- Fill parent height - useful inside page with height="full" --> {% hbox full_height=True %} {% vbox %}Column 1{% endvbox %} {% vbox %}Column 2{% endvbox %} {% endhbox %} <!-- With wrapping enabled --> {% hbox gap="m" wrap=True %} <div>Item 1</div> <div>Item 2</div> <div>Item 3</div> {% endhbox %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
gap str

Abstand zwischen den Kind-Elementen (xs|s|m|l|xl).

 "m" False
padding str

Innerer Seitenabstand (xs|s|m|l|xl). Optional.

 None False
max_width str

Maximale Breite (xs|s|m|l|xl|fit|full).

 "full" False
full_height bool

Die verfügbare Höhe des übergeordneten Container ausfüllen.

 False False
h_align str

Horizontale Ausrichtung (start|center|end|between|around|evenly).

 "start" False
v_align str

Vertikale Ausrichtung (start|center|end|stretch|baseline).

 "stretch" False
wrap bool

Flex-Elemente dürfen umbrechen.

 False False
{% load layout_tags %} {% hbox gap="s" v_align="center" h_align="between" %} <span>Left</span> <span>Right</span> {% endhbox %} {# Fill parent height - useful inside page with height="full" #} {% hbox full_height=True %} {% vbox %}Column 1{% endvbox %} {% vbox %}Column 2{% endvbox %} {% endhbox %} {# With max width #} {% hbox max_width="m" class="mx-auto" %} <div>Centered container</div> {% endhbox %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Flex-Container wird als <div>-Element dargestellt.

  • Das visuelle Layout hat keinen Einfluss auf die Lesereihenfolge von Screenreadern.

  • Es sollte sichergestellt werden, dass die Reihenfolge der Inhalte im Ausgangstext mit der beabsichtigten Lesereihenfolge übereinstimmt.

Verwandte Themen