Varianten-Picker

Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante

Im Builder nutzen

Nutzt: ui.swatch

Beispiele

Farb-Swatches + Größen-Pills mit ausverkaufter Größe (klicken wechselt die Auswahl)

Farbe: Schwarz

GrößeSMLXLGrößentabelle

Eigenschaften

Prop	Typ	Default	Builder-Label
colorLabel	string	"Farbe"	Label der Farbgruppe
colors	array	[]	Farben (Content-Daten)
sizesLabel	string	"Größe"	Label der Größengruppe
sizes	array	[]	Größen
sizeChartLabel	string	""	Größentabelle-Link (leer = aus)
sizeChartUrl	string	""	Größentabelle-Ziel

* Pflicht-Prop

Events & Slots

Events: ⚡ variant — im Surface per on: {<event>: {action, params}} verdrahtbar.

Genutzte Design-Tokens

border.hairlinecolor.border.strongcolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.disabledcolor.text.mutedfont.family.defaultradius.controlsize.12size.2size.4text.mdtext.smweight.semibold