Segment-Schalter — UI-Kit-Galerie

Beispiele

Ansichts-Wechsel

Als Formularfeld (hidden input), klein

Eigenschaften

Prop	Typ	Default	Builder-Label
options *	array	—	Segmente
value	string	""	Ausgewählter Wert (leer = erstes Segment)
name	string	""	Formular-Feldname (leer = kein hidden input)
size	string: sm \| md	"md"	Größe

* Pflicht-Prop

Events & Slots

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

Stellschrauben (Komponenten-Tokens)

Ebene 3 — aus dem CSS generiert (Registry). Umverdrahtbar per Hüllen-Komposition, ohne Markup-Eingriff; künftige Regler-Quelle des Component Builders.

Token	Default
`--segmented-control-background`	`var(--color-surface-sunken)`
`--segmented-control-active-background`	`var(--color-surface-default)`
`--segmented-control-border`	`var(--color-border-subtle)`

Genutzte Design-Tokens

border.hairlinecolor.border.subtlecolor.surface.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardelevation.controlfont.family.defaultradius.controlsize.1size.2size.3text.smtext.xsweight.medium

LLM-Notizen

component.segmented-control

Umschalter aus verbundenen Segmenten — genau eine Auswahl (Ansichts-/Modus-Wechsel: Liste|Board|Kalender, Monatlich|Jährlich). Abgrenzung: component.tabs wechselt INHALTE, der Segment-Schalter ist ein WERT (Event change {value}; name macht ihn per hidden input formular-tauglich).

Wichtige Props

options = [{value, label, icon?}] (Pflicht), value (leer = erstes), name, size (sm|md).
Tastatur: Pfeil links/rechts. Stellschrauben: --segmented-control-background, --segmented-control-active-background, --segmented-control-border.

Beispiel-Node


{
  "definition": "component.segmented-control",
  "props": { "options": [{"value": "list", "label": "Liste"}, {"value": "board", "label": "Board"}], "value": "board" }
}