Knoten·Knotenarten

anchor

Ein Knoten hängt an einer Kante, statt Koordinaten zu tragen. Aufgelöst wird gegen die BEKANNTE Fläche — das ist nicht responsiv, sondern gerechnet.

Syntax

json

{
  "$": "anchor",
  "tag"?: `a` … (40 Werte),
  "vertical"?: `top` … (4 Werte),
  "horizontal"?: `left` … (4 Werte),
  "offset"?: Wert,
  "inset"?: Wert,
  "basis"?: `px` … (5 Werte),
  "offsetBasis"?: `px` … (5 Werte),
  "insetBasis"?: `px` … (5 Werte),
  "unit"?: Text,
  "maxWidth"?: Wert,
  "attrs"?: Attribut[],
  "style"?: Style-Eintrag[],
  "children"?: Knoten[],
  "role"?: `headline` … (6 Werte),
  "motion"?: Bewegung,
  "when"?: Bedingung
}

Felder 16

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`
vertical	optional	`top` · `bottom` · `center` · `stretch` oder Wert
horizontal	optional	`left` · `right` · `center` · `stretch` oder Wert
offset	optional	Wert
inset	optional	Wert
basis	optional	`px` · `width` · `height` · `min` · `axis`
offsetBasis	optional	`px` · `width` · `height` · `min` · `axis`
insetBasis	optional	`px` · `width` · `height` · `min` · `axis`
unit	optional	Text
maxWidth	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

{
  "$": "anchor",
  "tag": "div",
  "vertical": "bottom",
  "horizontal": "left",
  "offset": 72,
  "children": [
    {
      "$": "text",
      "value": {
        "$": "state",
        "path": "slots.sig"
      }
    }
  ]
}

Ausgabe

<div style="position:absolute;bottom:72px;">@trybe</div>

Im Spielplatz öffnen — mit genau diesem BeispielBeispiel getippt

Der Abstand ist gegen die BEKANNTE Fläche aufgelöst — im Markup steht eine gerechnete Zahl. 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