Spacer Layout
Das spacer-Tag fügt ein Abstandselement mit fester Größe ein. Es kann verwendet werden, um explizite Abstände zwischen Elementen in Flex- oder Block-Layouts einzufügen.
Funktionen
size: Größe des Abstandselements gemäß der Größenskala (xs/s/m/l/xl).
Flex-Shrink: Schrumpft in Flex-Containern nicht.
Verwendung
Die Komponente wird über das spacer Tag eingebunden.
{% load layout_tags %}
{% hbox gap="xs" v_align="center" %}
<span>Left</span>
{% spacer size="xl" %}
<span>Right</span>
{% endhbox %}
<!-- Using default size (m) -->
{% vbox %}
<div>Above</div>
{% spacer %}
<div>Below</div>
{% endvbox %}
Parameter
Laden…
config (SpacerConfig oder als kwargs oder als Kombination aus beidem)
Dataclass für die Komponentenkonfiguration.
| Name | Typ | Beschreibung | Standardwert | Erforderlich |
|---|---|---|---|---|
| size | str | Größe des Spacer (xs|s|m|l|xl). |
"m" |
False
|
{% load layout_tags %}
{% spacer size="l" %}
Barrierefreiheit
| WCAG AA | WCAG AAA | |
|---|---|---|
| Status |
|
N/A
|
WCAG AA (Grundlagen)
Das Spacer-Element ist ein rein zur Darstellung dienendes leeres Element.
Screenreader überspringen das Spacer-Element.
Fall möglich sollten stattdessen CSS-Ränder und -Abstände verwendet werden, um zusätzliche DOM-Elemente zu vermeiden.
Offene Punkte
Das Attribut aria-hidden='true' fehlt am Spacer-Element.