Werte·Formen

Style-Eintrag über prop

Eine Form, die an mehreren Knoten vorkommt. Die Felder darunter kommen aus dem JSON-Schema.

Syntax

json

{
  "prop": Text (Muster `^-{0,2}[a-zA-Z][a-zA-Z0-9-]*$`),
  "value": Wert,
  "unit"?: Text,
  "when"?: Bedingung
}

Felder 4

Felder	Pflicht	Form
prop	Pflicht	Text (Muster `^-{0,2}[a-zA-Z][a-zA-Z0-9-]*$`)
value	Pflicht	Wert
unit	optional	Text
when	optional	Bedingung

Beispiel

Eingabe

{
  "$": "el",
  "tag": "div",
  "style": [
    {
      "prop": "font-size",
      "value": {
        "$": "state",
        "path": "kopfGroesse"
      },
      "unit": "px"
    }
  ],
  "children": [
    {
      "$": "text",
      "value": {
        "$": "state",
        "path": "slots.head"
      }
    }
  ]
}

Ausgabe

<div style="font-size:104px;">Sommer-Sale</div>

Im Spielplatz öffnen — mit genau diesem BeispielBeispiel getippt

Eigenschaft, Wert, Einheit — die Einheit steht am Eintrag, nicht im Wert. 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.styleEntry