Vbox Layout

Das vbox-Block-Tag erstellt einen vertikalen Flex-Container (Spaltenrichtung). Untergeordnete Elemente werden vertikal gestapelt, 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/stretch/baseline).

  • v_align: Vertikale Ausrichtung (start/center/end/between/around/evenly).

Verwendung

Die Komponente wird über das vbox Tag eingebunden.

{% load layout_tags %} {% vbox gap="m" %} <div>Top</div> <div>Middle</div> <div>Bottom</div> {% endvbox %} <!-- Fill parent height and center content vertically --> {% vbox full_height=True v_align="center" %} <div>Vertically centered</div> {% endvbox %} <!-- Full-height layout with vertical distribution --> {% vbox full_height=True h_align="center" v_align="between" %} <header>Header</header> <main>Content</main> <footer>Footer</footer> {% endvbox %}

Parameter

Laden…

config (VBoxConfig 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|stretch|baseline).

 "stretch" False
v_align str

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

 "start" False
{% load layout_tags %} {% vbox gap="m" h_align="stretch" %} <div>Top</div> <div>Bottom</div> {% endvbox %} {# Fill parent height and center content vertically #} {% vbox full_height=True v_align="center" %} <div>Vertically centered</div> {% endvbox %} {# With max width #} {% vbox max_width="l" class="mx-auto" %} <article>Content</article> {% endvbox %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

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

  • Die Reihenfolge der Inhalte im DOM entspricht der visuellen Reihenfolge (von oben nach unten).

  • Screenreader geben die Elemente in ihrer Reihenfolge im Quellcode vor.

Verwandte Themen