Dialog
Dialoge zeigen wichtige Hinweise im aktuellen Arbeitsablauf des Benutzers an.
Zusätzlich zur direkten Verwendung dieser Komponente bietet mdui vier Funktionen an: mdui.dialog, mdui.alert, mdui.confirm und mdui.prompt. Diese Funktionen vereinfachen die Verwendung der Dialog-Komponente.
Importieren Sie die Komponente nach Bedarf:
import 'mdui/components/dialog.js';
Importieren Sie den TypeScript-Typ der Komponente nach Bedarf:
import type { Dialog } from 'mdui/components/dialog.js';
Beispiel:
Dialog
Schließen
Dialog öffnen
<mdui-dialog class="example-dialog">
Dialog
<mdui-button>Schließen</mdui-button>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-dialog");
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector("mdui-button");
openButton.addEventListener("click", () => dialog.open = true);
closeButton.addEventListener("click", () => dialog.open = false);
</script>
Mit dem Attribut close-on-overlay-click schließen Sie den Dialog per Klick auf die Overlay-Schicht.
Dialog
Dialog öffnen
<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-overlay");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode
Mit dem Attribut close-on-esc schließen Sie den Dialog mit der ESC-Taste.
Dialog
Dialog öffnen
<mdui-dialog
close-on-esc
close-on-overlay-click
class="example-esc"
>Dialog</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-esc");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode
Mit dem Attribut fullscreen wird der Dialog im Vollbildmodus angezeigt.
Dialog
Schließen
Dialog öffnen
<mdui-dialog fullscreen class="example-fullscreen">
Dialog
<mdui-button>Schließen</mdui-button>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-fullscreen");
const openButton = dialog.nextElementSibling;
const closeButton = dialog.querySelector("mdui-button");
openButton.addEventListener("click", () => dialog.open = true);
closeButton.addEventListener("click", () => dialog.open = false);
</script>
Quellcode
Mit dem Attribut icon wird über dem Dialog ein Material Icons-Symbol hinzugefügt.
Dialog
Dialog öffnen
<mdui-dialog
icon="restart_alt"
close-on-overlay-click
class="example-icon"
>Dialog</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-icon");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
QuellcodeSie können das Element auch über den Slot icon über dem Dialog platzieren.
Dialog
Dialog öffnen
<mdui-dialog close-on-overlay-click class="example-icon-slot">
Dialog
<mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-icon-slot");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode
Setzen Sie die Attribute headline und description, um Titel und Beschreibung des Dialogs festzulegen.
Dialog öffnen
<mdui-dialog
headline="Ausgewählte Bilder löschen?"
description="Die Bilder werden dauerhaft aus Ihrem Konto und von allen synchronisierten Geräten entfernt."
close-on-overlay-click
class="example-headline"
></mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-headline");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
QuellcodeSie können die Elemente für Titel und Beschreibung auch über die Slots headline und description festlegen.
Ausgewählte Bilder löschen?
Die Bilder werden dauerhaft aus Ihrem Konto und von allen synchronisierten Geräten entfernt.
Dialog öffnen
<mdui-dialog close-on-overlay-click class="example-headline-slot">
<span slot="headline">Ausgewählte Bilder löschen?</span>
<span slot="description">Die Bilder werden dauerhaft aus Ihrem Konto und von allen synchronisierten Geräten entfernt.</span>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-headline-slot");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode
Sie können über den Slot action unten im Dialog Aktionsbuttons hinzufügen.
Abbrechen
Löschen
Dialog öffnen
<mdui-dialog
close-on-overlay-click
headline="Ausgewählte Bilder löschen?"
class="example-action"
>
<mdui-button slot="action" variant="text">Abbrechen</mdui-button>
<mdui-button slot="action" variant="tonal">Löschen</mdui-button>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-action");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
QuellcodeMit dem Attribut stacked-actions ordnen Sie die Aktionsbuttons unten vertikal an.
Geschwindigkeitssteigerung aktivieren
Nein danke
Dialog öffnen
<mdui-dialog
stacked-actions
close-on-overlay-click
headline="Standortdienst nutzen?"
class="example-stacked-actions"
>
<mdui-button slot="action" variant="text">Geschwindigkeitssteigerung aktivieren</mdui-button>
<mdui-button slot="action" variant="text">Nein danke</mdui-button>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-stacked-actions");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode
Sie können über den Slot header den Kopfbereich des Dialogs festlegen.
Dialog öffnen
<mdui-dialog close-on-overlay-click class="example-header">
<mdui-top-app-bar slot="header">
<mdui-button-icon icon="close"></mdui-button-icon>
<mdui-top-app-bar-title>Titel</mdui-top-app-bar-title>
<mdui-button variant="text">Speichern</mdui-button>
</mdui-top-app-bar>
<div style="height: 100px"></div>
</mdui-dialog>
<mdui-button>Dialog öffnen</mdui-button>
<script>
const dialog = document.querySelector(".example-header");
const openButton = dialog.nextElementSibling;
openButton.addEventListener("click", () => dialog.open = true);
</script>
Quellcode| Name |
|---|
open |
Wird ausgelöst, wenn der Dialog beginnt, sich zu öffnen. Kann mit event.preventDefault() verhindert werden.
|
opened |
Wird ausgelöst, nachdem der Dialog geöffnet wurde und die Animationen abgeschlossen sind.
|
close |
Wird ausgelöst, wenn der Dialog beginnt, sich zu schließen. Kann mit event.preventDefault() verhindert werden.
|
closed |
Wird ausgelöst, nachdem der Dialog geschlossen wurde und die Animationen abgeschlossen sind.
|
overlay-click |
Wird ausgelöst, wenn auf das Overlay geklickt wird.
|
| Name |
|---|
Header-Bereich; enthält standardmäßig die Slots icon und headline.
|
icon |
Oberes Icon.
|
headline |
Obere Überschrift.
|
description |
Text unter dem Titel.
|
| Standard |
Hauptinhalt des Dialogs.
|
action |
Elemente in der unteren Aktionsleiste.
|
| Name |
|---|
overlay |
Overlay-Ebene.
|
panel |
Dialog-Container.
|
Dialog-Header, enthält Icon und Überschrift.
|
icon |
Oberes Icon im Header.
|
headline |
Obere Überschrift im Header.
|
body |
Dialog-Hauptteil.
|
description |
Untertext im Hauptteil.
|
action |
Untere Aktionsschaltflächen.
|
| Name |
|---|
--shape-corner |
Der Eckradius der Komponente. Sie können einen bestimmten Pixelwert verwenden, es wird jedoch empfohlen, auf Design-Tokens zu verweisen.
|
--z-index |
Der CSS z-index-Wert der Komponente.
|
