Page Layout

Das Block-Tag page stellt einen Seitencontainer in voller Breite mit einheitlichem Abstand bereit. Verwende es als äußersten Container für Seiteninhalte, um einheitliche Abstände in gesamten Anwendung zu gewährleisten.

Für eine erweiterte Layoutsteuerung (max-width, Ausrichtung) verwende eine vbox innerhalb des Seiten-Containers.

WCAG AA
Block Tag

Funktionen

  • padding: Konfigurierbarer innerer Abstand mithilfe der Abstandsskala (xs/s/m/l/xl).

  • height: Verhalten der Höhe – auto (passt sich dem Inhalt an), full (Höhe des Ansichtsbereichs) oder peek (zeigt den nächsten Abschnitt/Seite am unteren Fensterrand an). Bei der Einstellung full oder peek wird die Seite zu einem Flex-Col-Container, sodass untergeordnete Elemente mit full_height=True den verfügbaren Platz ausfüllen können.

Verwendung

Die Komponente wird über das page Tag eingebunden.

{% load layout_tags %} {% page padding="l" %} <h1>Page Title</h1> <p>Page content goes here.</p> {% endpage %} <!-- Full viewport height with centered content --> {% page height="full" %} {% vbox v_align="center" full_height=True %} <main>Vertically centered content</main> {% endvbox %} {% endpage %} <!-- Peek: shows next section is coming --> {% page height="peek" %} <h1>Hero Section</h1> {% endpage %}

Parameter

Laden…

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

Dataclass für die Komponentenkonfiguration.

Name Typ Beschreibung Standardwert Erforderlich
padding str

Größe des inneren Seitenabstands (xs|s|m|l|xl).

 "m" False
height str

Verhalten der Höhe (auto|full|peek).

 "auto" False
{% load layout_tags %} {# Standard - fits content #} {% page padding="l" %} <h1>Welcome</h1> {% endpage %} {# Full viewport height with centered content #} {% page height="full" %} {% vbox v_align="center" full_height=True %} <div>Vertically centered</div> {% endvbox %} {% endpage %} {# Peek - shows next section is coming #} {% page height="peek" %} <h1>Hero Section</h1> {% endpage %}

Barrierefreiheit

WCAG AA WCAG AAA
Status
N/A

WCAG AA (Grundlagen)

  • Der Seitencontainer ist ein semantisches <div>-Element ohne spezifische ARIA-Rolle.

  • Der Inhalt sollte geeignete semantische HTML-Elemente verwenden.

  • Eventuell sollte der Hauptinhalt für die Orientierungsnavigation in ein <main>-Element eingebunden werden.

Verwandte Themen