Modal
Dialog mit Backdrop (surface.backdrop + layer.modal) — Schließen über X, Backdrop-Klick und Escape; inline-Modus für Demo/Builder
Nutzt: ui.icon
Beispiele
Dialog mit Footer (inline-Darstellung; X klickbar → schließt)
Auftrag löschen?
Der Auftrag 4711 wird unwiderruflich gelöscht.
Nicht umkehrbarGroßer Dialog mit Formular
Kunde bearbeiten
Eigenschaften
| Prop | Typ | Default | Builder-Label |
|---|---|---|---|
| title * | string | — | Titel |
| open | boolean | false | Geöffnet |
| size | string: sm | md | lg | "md" | Größe |
| inline | boolean | false | Inline (Demo/Builder: ohne Overlay) |
| tone | string: default | danger | "default" | Ton (danger = destruktive Aktion) |
| scrollBody | boolean | false | Inhalt scrollt (Kopf/Fuß bleiben) |
* Pflicht-Prop
Events & Slots
Events:
⚡ close — im Surface per on: {<event>: {action, params}} verdrahtbar.
Slot default:
akzeptiert ui.*, component.*, layout.*
Slot footer:
akzeptiert ui.button, layout.cluster
Genutzte Design-Tokens
border.hairlinecolor.action.secondarycolor.border.defaultcolor.status.dangercolor.surface.backdropcolor.surface.defaultcolor.surface.overlaycolor.text.defaultcolor.text.mutedcontainer.mdcontainer.smelevation.overlayfont.family.defaultlayer.modalradius.overlayradius.smsize.16size.24size.3size.4size.5size.6size.8text.lgweight.semibold