Theme: ← Übersicht Tokens

Tabs

Reiter mit Panels (bis 4) — lokaler Zustand im Controller, semantisches Event change

Im Builder nutzen
Components v1.1.0 Navigation WebsiteAppDesktop component.tabs

Beispiele

Drei Reiter (klickbar)

Panel 1: Stammdaten des Kunden.

Panel 2: Auftragsliste.

12 offen
Zweiter Reiter vorausgewählt

Übersicht.

Details sind aktiv gestartet.

Pills-Variante
Alle Einträge
Nur offene
Nur erledigte

Eigenschaften

PropTypDefaultBuilder-Label
labels *array—Reiter-Beschriftungen
activenumber0Aktiver Reiter (0-basiert)
variantstring: underline | pills"underline"Darstellung

* Pflicht-Prop

Events & Slots

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

Slot panel-1: akzeptiert ui.*, component.*, layout.*

Slot panel-2: akzeptiert ui.*, component.*, layout.*

Slot panel-3: akzeptiert ui.*, component.*, layout.*

Slot panel-4: akzeptiert ui.*, component.*, layout.*

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.

TokenDefault
--tabs-bordervar(--color-border-default)
--tabs-activevar(--color-action-primary)

Genutzte Design-Tokens

border.emphasiscolor.action.on-secondarycolor.action.primarycolor.action.secondarycolor.border.defaultcolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardfocus.ring-colorfocus.ring-offsetfocus.ring-widthfont.family.defaultradius.controlradius.fullsize.1size.2size.3size.4text.mdweight.mediumweight.semibold