confirm

Die confirm-Funktion ist ein Wrapper für die <mdui-dialog>-Komponente. Diese Funktion ersetzt funktional die native window.confirm-Funktion des Systems. Mit dieser Funktion können Sie einen Bestätigungsdialog öffnen, ohne den HTML-Code der Komponente schreiben zu müssen.

Verwendung

Importieren Sie die Funktion nach Bedarf:

import { confirm } from 'mdui/functions/confirm.js';

Beispiel:

öffnen

<mdui-button class="example-button">öffnen</mdui-button>

<script type="module">
  import { confirm } from "mdui/functions/confirm.js";

  const button = document.querySelector(".example-button");

  button.addEventListener("click", () => {
    confirm({
      headline: "Confirm-Titel",
      description: "Confirm-Beschreibung",
      confirmText: "OK",
      cancelText: "Abbrechen",
      onConfirm: () => console.log("bestätigt"),
      onCancel: () => console.log("abgebrochen"),
    });
  });
</script>

API

confirm(options: Options): Promise<void>

Die Funktion akzeptiert ein Options-Objekt als Argument. Der Rückgabewert ist ein Promise. Wenn der Dialog durch Klick auf die Bestätigungsschaltfläche geschlossen wird, wird das Promise aufgelöst; wenn er auf andere Weise geschlossen wird, wird das Promise rejected.

Options

Attributname	Typ	Standardwert
`headline`	`string`	-
Titel des Bestätigungsdialogs
`description`	`string`	-
Beschreibungstext des Bestätigungsdialogs
`icon`	`string`	-
Name des Material Icons-Symbols oben im Bestätigungsdialog
`closeOnEsc`	`boolean`	`false`
Ob der Bestätigungsdialog durch Drücken der ESC-Taste geschlossen werden soll
`closeOnOverlayClick`	`boolean`	`false`
Ob der Bestätigungsdialog durch Klicken auf die Overlay-Schicht geschlossen werden soll
`confirmText`	`string`	`OK`
Text der Bestätigungsschaltfläche
`cancelText`	`string`	`Abbrechen`
Text der Abbrechen-Schaltfläche
`stackedActions`	`boolean`	`false`
Ob die Aktionsbuttons unten vertikal angeordnet werden sollen
`queue`	`string`	-
Name der Warteschlange. Standardmäßig ist die Warteschlange deaktiviert. Bei mehrfachem Aufruf der Funktion werden mehrere Confirms gleichzeitig angezeigt. Sie können hier einen Warteschlangennamen angeben. Confirm-Funktionen mit demselben Warteschlangennamen öffnen den nächsten Confirm erst, nachdem der vorherige geschlossen wurde. Wenn die Warteschlangennamen der vier Funktionen `dialog()`, `alert()`, `confirm()` und `prompt()` gleich sind, teilen sie sich dieselbe Warteschlange.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Wird aufgerufen, wenn auf die Bestätigungsschaltfläche geklickt wird. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz. Standardmäßig wird der Confirm nach dem Klicken auf die Bestätigungsschaltfläche geschlossen. Wenn der Rückgabewert `false` ist, wird der Confirm nicht geschlossen. Wenn der Rückgabewert ein Promise ist, wird der Confirm geschlossen, nachdem das Promise aufgelöst wurde.
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Wird aufgerufen, wenn auf die Abbrechen-Schaltfläche geklickt wird. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz. Standardmäßig wird der Confirm nach dem Klicken auf die Abbrechen-Schaltfläche geschlossen. Wenn der Rückgabewert `false` ist, wird der Confirm nicht geschlossen. Wenn der Rückgabewert ein Promise ist, wird der Confirm geschlossen, nachdem das Promise aufgelöst wurde.
`onOpen`	`(dialog: Dialog) => void`	-
Wird aufgerufen, wenn sich der Bestätigungsdialog öffnet. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onOpened`	`(dialog: Dialog) => void`	-
Wird aufgerufen, sobald die Öffnungsanimation des Bestätigungsdialogs abgeschlossen ist. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onClose`	`(dialog: Dialog) => void`	-
Wird aufgerufen, wenn sich der Bestätigungsdialog schließt. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onClosed`	`(dialog: Dialog) => void`	-
Wird aufgerufen, sobald die Schließanimation des Bestätigungsdialogs abgeschlossen ist. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Wird aufgerufen, wenn auf die Overlay-Schicht geklickt wird. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.

Vorherige Seite

alert

Nächste Seite

prompt