Knoten·Knotenarten

stack

Ein Element, das seine Kinder mit deklariertem Abstand stapelt. Kein neues Layout-Modell, sondern ein fest verdrahtetes: Flexbox auf fester Fläche.

Syntax

json

{
  "$": "stack",
  "tag"?: `a` … (40 Werte),
  "direction"?: `column` … (2 Werte),
  "gap": Wert,
  "unit"?: Text,
  "align"?: Wert,
  "justify"?: Wert,
  "attrs"?: Attribut[],
  "style"?: Style-Eintrag[],
  "children"?: Knoten[],
  "role"?: `headline` … (6 Werte),
  "motion"?: Bewegung,
  "when"?: Bedingung
}

Felder 12

Felder	Pflicht	Form
tag	optional	`a` · `b` · `br` · `circle` · `div` · `ellipse` · `em` · `g` · `h1` · `h2` · `h3` · `h4` · `h5` · `h6` · `hr` · `i` · `img` · `li` · `line` · `ol` · `p` · `path` · `polygon` · `polyline` · `rect` · `s` · `section` · `small` · `span` · `strong` · `svg` · `table` · `tbody` · `td` · `tfoot` · `th` · `thead` · `tr` · `u` · `ul`
direction	optional	`column` · `row`
gap	Pflicht	Wert
unit	optional	Text
align	optional	Wert
justify	optional	Wert
attrs	optional	Attribut[]
style	optional	Style-Eintrag[]
children	optional	Knoten[]
role	optional	`headline` · `body` · `cta` · `legal` · `source` · `caption`
motion	optional	Bewegung
when	optional	Bedingung

Beispiel

Eingabe

{
  "$": "stack",
  "tag": "div",
  "direction": "column",
  "gap": 24,
  "children": [
    {
      "$": "text",
      "value": {
        "$": "state",
        "path": "slots.head"
      }
    },
    {
      "$": "text",
      "value": {
        "$": "state",
        "path": "slots.sub"
      }
    }
  ]
}

Ausgabe

<div style="display:flex;flex-direction:column;gap:24px;">Sommer-SaleDrei Wochen, alles reduziert. Nur online.</div>

Im Spielplatz öffnen — mit genau diesem BeispielBeispiel getippt

Ein Abstand am Container statt eines `margin-bottom` an jedem Kind. Gerechnet hat es renderDefinition() aus @trybe/static-post-templates — dieselbe Funktion wie im Studio-Canvas und im PNG-Export.

Der Zustand, gegen den gerendert wurde

{
  "slots": {
    "topline": "Sommer 2026",
    "head": "Sommer-Sale",
    "sub": "Drei Wochen, alles reduziert. Nur online.",
    "sig": "@trybe",
    "fmt": "1:1",
    "btn": "Jetzt sichern"
  },
  "mark": {
    "word": "Sale",
    "color": "#8a2f24"
  },
  "liste": [
    "Espresso",
    "Cortado",
    "Filter"
  ],
  "stufe": "zwei",
  "sale": true,
  "zeigeBadge": true,
  "kopfGroesse": 104
}

Verwandt

Quelle: buildStencilJsonSchema(registry).definitions.node — der Satz oben ist geschrieben, alles andere erzeugt