Dialog-Stapel
Mehrstufiger Dialog (Wizard): gestapelte Ebenen mit Zurück/Weiter, hintere Ebenen bleiben versetzt sichtbar — Escape schließt, emittiert step und finish
Nutzt: ui.icon
Beispiele
Dreistufiger Assistent (Weiter stapelt die Ebenen sichtbar)
Schritt 1 von 3Willkommen
Dieser Assistent richtet deinen Arbeitsbereich in drei Schritten ein.
Schritt 2 von 3Team einladen
Lade Kolleginnen und Kollegen ein — das geht auch später.
Schritt 3 von 3Fertig
Alles bereit. Du kannst jetzt loslegen.
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| openerLabel | string | "Assistent starten" | Öffner-Button |
| finishLabel | string | "Fertigstellen" | Abschluss-Button |
| steps * | array | — | Ebenen |
* Pflicht-Prop
Events & Slots
Events:
⚡ step⚡ finish — 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 |
|---|---|
--dialog-stack-action-on-primary | var(--color-action-on-primary) |
--dialog-stack-action-on-secondary | var(--color-action-on-secondary) |
--dialog-stack-action-primary | var(--color-action-primary) |
--dialog-stack-action-primary-hover | var(--color-action-primary-hover) |
--dialog-stack-action-secondary | var(--color-action-secondary) |
--dialog-stack-action-secondary-border | var(--color-action-secondary-border) |
--dialog-stack-border-default | var(--color-border-default) |
--dialog-stack-elevation-overlay | var(--elevation-overlay) |
--dialog-stack-radius-control | var(--radius-control) |
--dialog-stack-radius-overlay | var(--radius-overlay) |
--dialog-stack-surface-backdrop | var(--color-surface-backdrop) |
--dialog-stack-surface-overlay | var(--color-surface-overlay) |
--dialog-stack-surface-sunken | var(--color-surface-sunken) |
--dialog-stack-text-default | var(--color-text-default) |
--dialog-stack-text-muted | var(--color-text-muted) |
Genutzte Design-Tokens
border.hairlinecolor.action.on-primarycolor.action.on-secondarycolor.action.primarycolor.action.primary-hovercolor.action.secondarycolor.action.secondary-bordercolor.border.defaultcolor.surface.backdropcolor.surface.overlaycolor.surface.sunkencolor.text.defaultcolor.text.mutedduration.fasteasing.standardelevation.overlayfont.family.defaultlayer.modalleading.baseradius.controlradius.overlaysize.2size.32size.4size.5size.8text.lgtext.mdtext.smtext.xsweight.semibold