Komponente · 6 Varianten
Dialog
components/Dialog.astro
v2: öffnet und schließt, Klick auf den Rand schließt. Nativer dialog, opak, Haarlinie, ohne Backdrop-Schleier. Drei Breiten, Kopf und Fuß, Bestätigen mit Signal-Punkt, Vollbild.
Notizen
- Bestand: nichts. showModal() liefert Fokus-Falle und Esc.
- Backdrop transparent gemäß Kein-Overlay. Offen, siehe Entscheidungen.
Props
| Name | Typ | Default | Notiz |
|---|---|---|---|
| variant | "klein" | "mittel" | "gross" | "kopf-fuss" | "bestaetigen" | "voll" | "klein" | 01–06. |
| surface | "nacht" | "paper" | "nacht" | Pflicht-Paar. |
<Dialog variant="klein" surface="nacht" />01 · Klein
max-w-sm
Anfrage. Fuß ohne Linie.
Nacht
Paper
02 · Mittel
max-w-lg
Anfrage. —
Nacht
Paper
03 · Groß
max-w-3xl, Kopf, Fuß
Anfrage. p-8.
Nacht
Paper
04 · Kopf Fuß
Label oben, Aktionen unten
Menü-Panel. Haarlinien.
Nacht
Paper
05 · Bestätigen
Destruktiv mit Punkt
Button destruktiv. Verwerfen.
Nacht
Paper
06 · Voll
Ganzer Viewport
Mobil-Menü voll. Für Mobil.
Nacht
Paper