Schritte (Progress Steps)
Wizard-Fortschritt (Untitled-UI-Muster): erledigte Schritte mit Häkchen, aktiver hervorgehoben, kommende gedämpft — Verbindungslinien aus Tokens
Nutzt: ui.icon
Beispiele
Wizard mit erledigtem, aktivem und kommenden Schritt
- KundendatenName und Adresse
- 2PositionenArtikel wählen
- 3VersandArt und Termin
- 4PrüfenZusammenfassung
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| steps * | array | — | Schritte |
| active | number | 0 | Aktiver Schritt (0-basiert) |
* Pflicht-Prop
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 |
|---|---|
--progress-steps-action-on-primary | var(--color-action-on-primary) |
--progress-steps-action-primary | var(--color-action-primary) |
--progress-steps-border-default | var(--color-border-default) |
--progress-steps-border-strong | var(--color-border-strong) |
--progress-steps-focus-ring-width | var(--focus-ring-width) |
--progress-steps-radius-full | var(--radius-full) |
--progress-steps-surface-default | var(--color-surface-default) |
--progress-steps-text-default | var(--color-text-default) |
--progress-steps-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.on-primarycolor.action.primarycolor.border.defaultcolor.border.strongcolor.surface.defaultcolor.text.defaultcolor.text.mutedfocus.ring-widthfont.family.defaultradius.fullsize.1size.2size.4size.8text.smweight.semibold