Varianten-Picker — component.variant-picker
Produktvarianten wählen: Farb-Swatches (ui.swatch) + Größen-Pills mit Verfügbarkeit — Controller pflegt die Auswahl und emittet variante
Componentv1.0.1Commerceweb.documentweb.applicationbuilder.preview
Beispiele
Farb-Swatches + Größen-Pills mit ausverkaufter Größe (klicken wechselt die Auswahl)
Farbe: Schwarz
GrößeGrößentabelle
Eigenschaften
| Prop | Typ | Default |
|---|---|---|
colorLabel | string | "Farbe" |
colors | array | [] |
sizesLabel | string | "Größe" |
sizes | array | [] |
sizeChartLabel | string | "" |
sizeChartUrl | string | "" |
Events & Slots
Events: variant
Stellschrauben (Komponenten-Tokens)
| Token | Default |
|---|---|
--variant-picker-border-strong | var(--color-border-strong) |
--variant-picker-radius-control | var(--radius-control) |
--variant-picker-surface-default | var(--color-surface-default) |
--variant-picker-surface-sunken | var(--color-surface-sunken) |
--variant-picker-text-default | var(--color-text-default) |
--variant-picker-text-disabled | var(--color-text-disabled) |
--variant-picker-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairline color.border.strong color.surface.default color.surface.sunken color.text.default color.text.disabled color.text.muted font.family.default radius.control size.12 size.2 size.4 text.md text.sm weight.semibold