Das neue mdui 2 auf Basis von Material Design 3 und Web Components ist da. Zur mdui 2 Dokumentation wechseln.

Dialog

Ein Dialog in mdui ist eine sehr flexible Komponente, die häufig verwendet wird, um Nutzer nach Informationen zu fragen, sie zu benachrichtigen oder zu warnen.

Es kann immer nur ein Dialog gleichzeitig angezeigt werden. Wenn ein weiterer Dialog geöffnet wird, während der aktuelle noch nicht geschlossen ist, wird der nächste Dialog in eine Warteschlange gestellt und geöffnet, sobald der aktuelle Dialog geschlossen wurde.

Verwendung

Aufruf über Attribute
Aufruf über JavaScript

Stil

Standard-Dialog

Dies ist ein Standard-Dialog.

Beispiel

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">erase</button>
  </div>
</div>

Ohne Titelleiste

Dieser Dialog hat keine Titelleiste.

Beispiel

<div class="mdui-dialog">
  <div class="mdui-dialog-content">Discard draft?</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">cancel</button>
    <button class="mdui-btn mdui-ripple">discard</button>
  </div>
</div>

Vertikale Buttons

Die Buttons am unteren Rand des Dialogs sind standardmäßig horizontal ausgerichtet. Fügen Sie einfach die Klasse .mdui-dialog-actions-stacked zu <div class="mdui-dialog-actions"></div> hinzu, um die Buttons vertikal auszurichten.

Beispiel

<div class="mdui-dialog">
  <div class="mdui-dialog-title">Use Google's location service?</div>
  <div class="mdui-dialog-content">Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.</div>
  <div class="mdui-dialog-actions mdui-dialog-actions-stacked">
    <button class="mdui-btn mdui-ripple">turn on speed boost</button>
    <button class="mdui-btn mdui-ripple">no thanks</button>
  </div>
</div>

Fixierter Titel und Buttons

Wenn der Inhalt des Dialogs die Höhe des Dialogs überschreitet, erscheint in .mdui-dialog-content eine Scrollleiste.

Wenn .mdui-dialog-title und .mdui-dialog-actions innerhalb von .mdui-dialog-content platziert werden, scrollen Titel und Buttons mit der Scrollleiste mit. Andernfalls bleiben Titel und Buttons jeweils oben und unten fixiert und scrollen nicht mit.

Beispiel

<div class="mdui-dialog">
  <div class="mdui-dialog-content">
    <div class="mdui-dialog-title">Use Google's location service?</div>
    Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.
    <br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test<br/>test
  </div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple">no thanks</button>
    <button class="mdui-btn mdui-ripple">turn on speeboost</button>
  </div>
</div>

Benutzerdefinierter Inhalt

Im Dialog ist nur <div class="mdui-dialog"></div> erforderlich. Der Inhalt dieses Elements kann durch beliebiges HTML ersetzt werden.

Im folgenden Beispiel wird ein Tab in den Dialog eingefügt:

Beispiel

<div class="mdui-dialog" id="example-4">
  <div class="mdui-tab mdui-tab-full-width" id="example4-tab">
    <a href="#example4-tab1" class="mdui-ripple">web</a>
    <a href="#example4-tab2" class="mdui-ripple">shopping</a>
    <a href="#example4-tab3" class="mdui-ripple">videos</a>
  </div>
  <div id="example4-tab1" class="mdui-p-a-2">
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
    <p>tab 1</p>
  </div>
  <div id="example4-tab2" class="mdui-p-a-2">
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
    <p>tab 2</p>
  </div>
  <div id="example4-tab3" class="mdui-p-a-2">
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
    <p>tab 3</p>
  </div>
</div>

<script>
  var tab = new mdui.Tab('#example4-tab');
  document.getElementById('example-4').addEventListener('open.mdui.dialog', function () {
    tab.handleUpdate();
  });
</script>

Verwendung

Aufruf über Attribute

Bei dieser Methode ist kein JavaScript-Code erforderlich. Fügen Sie einfach das Attribut mdui-dialog="options" zu einem steuernden Element (z. B. einem Button) hinzu. Bei Verwendung benutzerdefinierter Attribute ist ein zusätzlicher Parameter target erforderlich, um den zu steuernden Dialog anzugeben. Der Wert ist der CSS-Selektor des Dialogs.

Beispiel

<button class="mdui-btn mdui-ripple mdui-color-theme-accent" mdui-dialog="{target: '#exampleDialog'}">open</button>

<div class="mdui-dialog" id="exampleDialog">
  <div class="mdui-dialog-title">Are you sure?</div>
  <div class="mdui-dialog-content">You'll lose all photos and media!</div>
  <div class="mdui-dialog-actions">
    <button class="mdui-btn mdui-ripple" mdui-dialog-close>cancel</button>
    <button class="mdui-btn mdui-ripple" mdui-dialog-confirm>erase</button>
  </div>
</div>

Elementen innerhalb des Dialogs können Attribute hinzugefügt werden, um Ereignisse zu binden. Diese Attribute können auch bei Aufrufen über JavaScript verwendet werden.

Attribut	Beschreibung
`mdui-dialog-close`	Klicken auf dieses Element löst das Ereignis `close.mdui.dialog` aus und schließt den Dialog.
`mdui-dialog-cancel`	Klicken auf dieses Element löst das Ereignis `cancel.mdui.dialog` aus.
`mdui-dialog-confirm`	Klicken auf dieses Element löst das Ereignis `confirm.mdui.dialog` aus.

Aufruf über JavaScript

Komponente instanziieren:

// selector ist der CSS-Selektor, das DOM-Element oder der HTML-String des Dialogs.
// options sind die Konfigurationsparameter, siehe die Parameterliste unten.
var inst = new mdui.Dialog(selector, options);

Ausführen

Parameter

Parametername	Typ	Standardwert	Beschreibung
`overlay`	`boolean`	`true`	Ob beim Öffnen des Dialogs eine Maske (Overlay) angezeigt werden soll.
`history`	`boolean`	`true`	Ob beim Öffnen des Dialogs ein URL-Hash hinzugefügt werden soll. Wenn true, kann der Dialog über die Zurück-Schaltfläche des Browsers oder die Zurück-Taste bei Android geschlossen werden.
`modal`	`boolean`	`false`	Ob der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
`closeOnEsc`	`boolean`	`true`	Ob der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
`closeOnCancel`	`boolean`	`true`	Ob der Dialog beim Drücken des Abbrechen-Buttons geschlossen werden soll.
`closeOnConfirm`	`boolean`	`true`	Ob der Dialog beim Drücken des Bestätigen-Buttons geschlossen werden soll.
`destroyOnClosed`	`boolean`	`false`	Ob der Dialog nach dem Schließen automatisch zerstört werden soll.

Methode

Methodenname	Beschreibung
`open()`	Öffnet den Dialog.
`close()`	Schließt den Dialog.
`toggle()`	Schaltet den Öffnungszustand des Dialogs um.
`getState()`	Ruft den Status des Dialogs ab. Es gibt vier Zustände (`opening`, `opened`, `closing`, `closed`).
`destroy()`	Zerstört den Dialog.
`handleUpdate()`	Passt die Position des Dialogs und die Höhe der Scrollleiste neu an. Diese Methode muss aufgerufen werden, wenn der Inhalt des Dialogs nach dem Öffnen geändert wurde.

Ereignis

Ereignisname	Beschreibung	Ziel	Parameter
`open.mdui.dialog`	Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Dialogs beginnt.	`<div class="mdui-dialog"></div>`	`event._detail.inst`: Instanz
`opened.mdui.dialog`	Das Ereignis wird ausgelöst, wenn die Öffnungsanimation des Dialogs endet.
`close.mdui.dialog`	Das Ereignis wird ausgelöst, wenn die Schließanimation des Dialogs beginnt.
`closed.mdui.dialog`	Das Ereignis wird ausgelöst, wenn die Schließanimation des Dialogs endet.
`cancel.mdui.dialog`	Das Ereignis wird ausgelöst, wenn der Abbrechen-Button gedrückt wird.
`confirm.mdui.dialog`	Das Ereignis wird ausgelöst, wenn der Bestätigen-Button gedrückt wird.

Vordefinierte Dialoge

mdui bietet vordefinierte Dialog-Funktionen für gängige Szenarien an. Diese Dialoge werden nur über JavaScript aufgerufen und benötigen keinen HTML-Code.

Diese Funktionen geben eine Dialog-Instanz zurück.

mdui.dialog()

Öffnet einen Dialog, bei dem Titel, Inhalt, Buttons usw. angepasst werden können. Diese Methode ist allgemein gehalten; mdui.alert(), mdui.confirm() und mdui.prompt() basieren alle auf dieser Methode.

mdui.dialog(options)

Beispiel

mdui.dialog({
  title: 'title',
  content: 'content',
  buttons: [
    {
      text: 'Abbrechen'
    },
    {
      text: 'Bestätigen',
      onClick: function(inst){
        mdui.alert('Callback beim Klicken auf den Bestätigen-Button');
      }
    }
  ]
});

Parameter

Parametername	Typ	Standardwert	Beschreibung
`title`	`string`		Titel des Dialogs.
`content`	`string`		Inhalt des Dialogs.
`buttons`	`array`		Array von Buttons, wobei jeder Button ein Objekt mit Button-Parametern ist (siehe Tabelle unten).
`stackedButtons`	`boolean`	`false`	Ob die Buttons vertikal ausgerichtet werden sollen.
`cssClass`	`string`		CSS-Klassen, die dem `.mdui-dialog` hinzugefügt werden.
`history`	`boolean`	`true`	Ob auf `hashchange`-Ereignisse reagiert werden soll. Wenn true, kann der Dialog über die Android-Zurück-Taste oder die Browser-Zurück-Schaltfläche geschlossen werden.
`overlay`	`boolean`	`true`	Ob beim Öffnen des Dialogs eine Maske angezeigt werden soll.
`modal`	`boolean`	`false`	Ob der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
`closeOnEsc`	`boolean`	`true`	Ob der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
`destroyOnClosed`	`boolean`	`true`	Ob der Dialog nach dem Schließen automatisch zerstört werden soll.
`onOpen`	`function`		Callback beim Start der Öffnungsanimation. Parameter ist die Dialog-Instanz.
`onOpened`	`function`		Callback am Ende der Öffnungsanimation. Parameter ist die Dialog-Instanz.
`onClose`	`function`		Callback beim Start der Schließanimation. Parameter ist die Dialog-Instanz.
`onClosed`	`function`		Callback am Ende der Schließanimation. Parameter ist die Dialog-Instanz.

Parameter der Buttons:

Parametername	Typ	Standardwert	Beschreibung
`text`	`string`		Button-Text.
`bold`	`boolean`	`false`	Ob der Button-Text fett dargestellt werden soll.
`close`	`boolean`	`true`	Ob der Dialog nach dem Klicken auf den Button geschlossen werden soll.
`onClick`	`function`		Callback-Funktion beim Klicken auf den Button.

mdui.alert()

Öffnet einen Alert-Dialog, der einen Titel, Inhalt und einen Bestätigen-Button enthalten kann:

mdui.alert(text, onConfirm, options)

mdui.alert(text, title, onConfirm, options)

Beispiel

// Nur Text
mdui.alert('content');

// Mit Titel und Text
mdui.alert('content', 'title');

// Mit Callback
mdui.alert('content', 'title', function() {
  mdui.alert('Bestätigen-Button geklickt');
});

// Mit Text und Callback
mdui.alert('content', function() {
  mdui.alert('Bestätigen-Button geklickt');
});

text: Text
title: (Optional) Titel
onConfirm: (Optional) Callback beim Klicken auf den Bestätigen-Button. Parameter ist die Dialog-Instanz.
options: (Optional) Parameter, siehe Tabelle unten.

Parametername	Typ	Standardwert	Beschreibung
`confirmText`	`string`	`ok`	Text des Bestätigen-Buttons.
`history`	`boolean`	`true`	Ob auf `hashchange`-Ereignisse reagiert werden soll. Wenn true, kann der Dialog über die Android-Zurück-Taste oder die Browser-Zurück-Schaltfläche geschlossen werden.
`modal`	`boolean`	`false`	Ob der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
`closeOnEsc`	`boolean`	`true`	Ob der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
`closeOnConfirm`	`boolean`	`true`	Ob der Dialog beim Drücken des Bestätigen-Buttons geschlossen werden soll.

mdui.confirm()

Öffnet einen Bestätigungsdialog, der einen Titel, Inhalt, einen Bestätigen-Button und einen Abbrechen-Button enthalten kann:

mdui.confirm(text, onConfirm, onCancel, options)

mdui.confirm(text, title, onConfirm, onCancel, options)

Beispiel

// Mit Text und Bestätigungs-Callback
mdui.confirm('content', function(){
  mdui.alert('Bestätigen-Button geklickt');
});

// Mit Text, Bestätigen- und Abbrechen-Callback
mdui.confirm('content',
  function(){
    mdui.alert('Bestätigen-Button geklickt');
  },
  function(){
    mdui.alert('Abbrechen-Button geklickt');
  }
);

// Mit Text, Titel und Bestätigungs-Callback
mdui.confirm('content', 'title', function(){
  mdui.alert('Bestätigen-Button geklickt');
});

// Mit Text, Titel, Bestätigen- und Abbrechen-Callback
mdui.confirm('content', 'title',
  function(){
    mdui.alert('Bestätigen-Button geklickt');
  },
  function(){
    mdui.alert('Abbrechen-Button geklickt');
  }
);

text: Text
title: (Optional) Titel
onConfirm: (Optional) Callback beim Klicken auf den Bestätigen-Button. Parameter ist die Dialog-Instanz.
onCancel: (Optional) Callback beim Klicken auf den Abbrechen-Button. Parameter ist die Dialog-Instanz.
options: (Optional) Parameter, siehe Tabelle unten.

Parametername	Typ	Standardwert	Beschreibung
`confirmText`	`string`	`ok`	Text des Bestätigen-Buttons.
`cancelText`	`string`	`cancel`	Text des Abbrechen-Buttons.
`history`	`boolean`	`true`	Ob auf `hashchange`-Ereignisse reagiert werden soll. Wenn true, kann der Dialog über die Android-Zurück-Taste oder die Browser-Zurück-Schaltfläche geschlossen werden.
`modal`	`boolean`	`false`	Ob der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
`closeOnEsc`	`boolean`	`true`	Ob der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
`closeOnCancel`	`boolean`	`true`	Ob der Dialog beim Drücken des Abbrechen-Buttons geschlossen werden soll.
`closeOnConfirm`	`boolean`	`true`	Ob der Dialog beim Drücken des Bestätigen-Buttons geschlossen werden soll.

mdui.prompt()

Öffnet einen Eingabedialog (Prompt), der einen Titel, Inhalt, ein Eingabefeld, einen Bestätigen-Button und einen Abbrechen-Button enthalten kann:

mdui.prompt(label, onConfirm, onCancel, options)

mdui.prompt(label, title, onConfirm, onCancel, options)

Beispiel

// Einzeiliges Eingabefeld
mdui.prompt('Dies ist ein einzeiliges Eingabefeld',
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Bestätigen-Button geklickt');
  },
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Abbrechen-Button geklickt');
  }
);

// Mehrzeiliges Eingabefeld
mdui.prompt('Dies ist ein mehrzeiliges Eingabefeld',
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Bestätigen-Button geklickt');
  },
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Abbrechen-Button geklickt');
  },
  {
    type: 'textarea'
  }
);

// Mit Titel
mdui.prompt('Bitte Text eingeben', 'title',
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Bestätigen-Button geklickt');
  },
  function (value) {
    mdui.alert('Sie haben eingegeben:' + value + ', Abbrechen-Button geklickt');
  }
);

label: Text des schwebenden Labels (Floating Label) des Eingabefelds
title: (Optional) Titel
onConfirm: (Optional) Callback beim Klicken auf den Bestätigen-Button. Enthält zwei Parameter: den Wert des Eingabefelds und die Dialog-Instanz.
onCancel: (Optional) Callback beim Klicken auf den Abbrechen-Button. Enthält zwei Parameter: den Wert des Eingabefelds und die Dialog-Instanz.
options: (Optional) Parameter, siehe Tabelle unten.

Parametername	Typ	Standardwert	Beschreibung
`confirmText`	`string`	`ok`	Text des Bestätigen-Buttons
`cancelText`	`string`	`cancel`	Text des Abbrechen-Buttons
`history`	`boolean`	`true`	Ob auf `hashchange`-Ereignisse reagiert werden soll. Wenn true, kann der Dialog über die Android-Zurück-Taste oder die Browser-Zurück-Schaltfläche geschlossen werden.
`modal`	`boolean`	`false`	Ob der Dialog modal sein soll. Bei false wird der Dialog geschlossen, wenn außerhalb des Dialogs geklickt wird, andernfalls nicht.
`closeOnEsc`	`boolean`	`true`	Ob der Dialog durch Drücken der Esc-Taste geschlossen werden soll.
`closeOnCancel`	`boolean`	`true`	Ob der Dialog beim Drücken des Abbrechen-Buttons geschlossen werden soll
`closeOnConfirm`	`boolean`	`true`	Ob der Dialog beim Drücken des Bestätigen-Buttons geschlossen werden soll
`confirmOnEnter`	`boolean`	`false`	Löst den `onConfirm`-Callback beim Drücken der Enter-Taste aus.
`type`	`string`	`text`	Typ des Eingabefelds. `text`: Einzeiliges Eingabefeld `textarea`: Mehrzeiliges Eingabefeld
`maxlength`	`int`	`0`	Maximale Anzahl der Eingabezeichen
`defaultValue`	`string`	`''`	Standardwert des Eingabefelds

CSS-Klassenliste

Klassenname	Beschreibung
`.mdui-dialog`	Definiert eine Dialog-Komponente.
`.mdui-dialog-title`	Definiert den Titel des Dialogs.
`.mdui-dialog-content`	Definiert den Inhalt des Dialogs.
`.mdui-dialog-actions`	Definiert die Aktionsleiste des Dialogs.
`.mdui-dialog-actions-stacked`	Richtet die Buttons in der Aktionsleiste des Dialogs vertikal aus.

Tabelle

Menü

Dialog

Verwendung

Verwandte Themen

Stil

Standard-Dialog

Ohne Titelleiste

Vertikale Buttons

Fixierter Titel und Buttons

Benutzerdefinierter Inhalt

Verwendung

Aufruf über Attribute

Aufruf über JavaScript

Parameter

Methode

Ereignis

Vordefinierte Dialoge

mdui.dialog()

mdui.alert()

mdui.confirm()

mdui.prompt()

CSS-Klassenliste