Stack Stapel
Einführung
Die Stack-Komponente ist ein leistungsstarkes Layout-Container-Element, das verwendet wird, um verwandte Komponenten in einem linearen Fluss – vertikal oder horizontal – zu gruppieren und anzuordnen. Aufbauend auf CSS Flexbox bietet sie präzise Kontrolle über Ausrichtungen, Verteilungen (Justify), Abstände und responsives Layout-Wrapping.
Der Stack ist vollständig als stack-Block in den Page Builder integriert, sodass Inhaltsautoren und Entwickler visuelle Abschnitte, Navigationsmenüs und Formularstrukturen direkt im CMS strukturieren können.
Verwendung
Diese Beispiele veranschaulichen, wie Inhaltseditoren lineare Layouts binden und strukturieren.
1. Horizontaler Layout-Stack
Ordnet untergeordnete Elemente entlang der horizontalen X-Achse mit benutzerdefinierten Abständen sequenziell an. Hervorragend geeignet für horizontale Navigationselemente, Avatare oder Tag-Badges.
{
"type": "stack",
"direction": "horizontal",
"gap": "4",
"children": [
{ "type": "badge", "text": "Item A", "colorPalette": "blue" },
{ "type": "badge", "text": "Item B", "colorPalette": "blue" },
{ "type": "badge", "text": "Item C", "colorPalette": "blue" }
]
}
2. Vertikaler Flow-Stack
Ordnet untergeordnete Elemente entlang der vertikalen Y-Achse sequenziell an. Perfekt für Standard-Einstellungspräferenzen, Landingpage-Highlights oder Kartenverzeichnisse.
{
"type": "stack",
"direction": "vertical",
"gap": "3",
"children": [
{ "type": "text", "content": "Priority Option 1" },
{ "type": "text", "content": "Priority Option 2" }
]
}
3. Responsiver Umschalter von Spalte zu Zeile
Konfiguriert das Layout so, dass untergeordnete Elemente auf kleineren Bildschirmabmessungen vertikal gestapelt und auf Tablet-/Desktop-Anzeigen automatisch horizontal angeordnet werden.
{
"type": "stack",
"direction": "{\"base\": \"column\", \"md\": \"row\"}",
"gap": "{\"base\": \"4\", \"md\": \"8\"}",
"children": [
{ "type": "button", "text": "Call to Action 1" },
{ "type": "button", "text": "Call to Action 2", "variant": "outline" }
]
}
Eigenschaften
| Eigenschaft | CMS-Feldtyp | Standard | Beschreibung / unterstützte Optionen |
|---|---|---|---|
Stack-Richtung (direction) | select \ | string | "vertical" |
Abstand (gap) | string | "8px" | Randabstände zwischen untergeordneten Elementen innerhalb des Stacks. |
Elemente ausrichten (align) | select | - | Visuelle Ausrichtung der Elemente entlang der Querachse (Flexbox align-items).• Optionen: "start", "center", "end", "stretch". |
Elemente verteilen (justify) | select | - | Verteilung des Leerraums entlang der Hauptachse (Flexbox justify-content).• Optionen: "start", "center", "end", "between", "around". |
Kinderinhalte (children) | list | - | Die Sammlung der im Container zu stapelnden, verschachtelten Layout- oder visuellen Blöcke. |
Benutzerdefinierte Klasse (class) | string | - | Benutzerdefinierte CSS-Klassenüberschreibungen, die direkt auf den Stack-Container angewendet werden. |
Entwicklerhinweise & Barrierefreiheit
- Responsive JSON-Zeichenketten: Im Sveltia CMS können komplexe Stilregeln pro Breakpoint (wie das Einklappen von Zeilen zu Spalten) definiert werden, indem man der
direction- undgap-Eigenschaft ein stringifiziertes JSON-Layout übergibt. - Zugängliche Navigation: Beim Anordnen aktiver Interaktionen innerhalb eines Stacks (wie Button-Flows) sollte die Standard-HTML-Reihenfolge beibehalten werden. Verlassen Sie sich nicht stark auf CSS-Layout-Umsortierung (wie
flex-direction: row-reverse), da diese mit dem physischen Tab-Tasten-Fluss divergieren kann. - Browser-Flex-Gap-Unterstützung: Die gap-Eigenschaft nutzt native CSS-Flexbox-
gap-Regeln und sorgt so für saubere Layouts, ohne dass negative Randüberschreibungen in modernen mobilen/Desktop-Webbrowsern nötig sind.