prompt

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

Verwendung

Importieren Sie die Funktion nach Bedarf:

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

Beispiel:

öffnen

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

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

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

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

API

prompt(options: Options): Promise<string>

Das Argument der Funktion ist ein Options-Objekt. Der Rückgabewert ist ein Promise. Wenn der Dialog durch Klick auf die Bestätigungsschaltfläche geschlossen wird, wird das Promise aufgelöst (mit dem Wert des Eingabefelds als Parameter). Wenn er auf andere Weise geschlossen wird, wird das Promise rejected.

Options

Attributname	Typ	Standardwert
`headline`	`string`	-
Titel des Prompts
`description`	`string`	-
Beschreibungstext des Prompts
`icon`	`string`	-
Name des Material Icons-Symbols oben im Eingabedialog
`closeOnEsc`	`boolean`	`false`
Ob der Eingabedialog durch Drücken der ESC-Taste geschlossen werden soll
`closeOnOverlayClick`	`boolean`	`false`
Ob der Eingabedialog 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 Prompts gleichzeitig angezeigt. Sie können hier einen Warteschlangennamen angeben. Prompt-Funktionen mit demselben Warteschlangennamen öffnen den nächsten Prompt 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`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Wird aufgerufen, wenn auf die Bestätigungsschaltfläche geklickt wird. Die Funktionsparameter sind der Wert des Eingabefelds und die Dialog-Instanz. `this` zeigt auf die Dialog-Instanz. Standardmäßig wird der Prompt nach dem Klicken auf die Bestätigungsschaltfläche geschlossen. Wenn der Rückgabewert `false` ist, wird der Prompt nicht geschlossen. Wenn der Rückgabewert ein Promise ist, wird der Prompt geschlossen, nachdem das Promise aufgelöst wurde.
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
Wird aufgerufen, wenn auf die Abbrechen-Schaltfläche geklickt wird. Die Funktionsparameter sind der Wert des Eingabefelds und die Dialog-Instanz. `this` zeigt auf die Dialog-Instanz. Standardmäßig wird der Prompt nach dem Klicken auf die Abbrechen-Schaltfläche geschlossen. Wenn der Rückgabewert `false` ist, wird der Prompt nicht geschlossen. Wenn der Rückgabewert ein Promise ist, wird der Prompt geschlossen, nachdem das Promise aufgelöst wurde.
`onOpen`	`(dialog: Dialog) => void`	-
Wird aufgerufen, wenn sich der Eingabedialog öffnet. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onOpened`	`(dialog: Dialog) => void`	-
Wird aufgerufen, sobald die Öffnungsanimation des Eingabedialogs abgeschlossen ist. Der Funktionsparameter ist die Dialog-Instanz, `this` zeigt ebenfalls auf die Dialog-Instanz.
`onClose`	`(dialog: Dialog) => void`	-
Wird aufgerufen, wenn sich der Eingabedialog 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 Eingabedialogs 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.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
Validierungsfunktion für das Eingabefeld. Das Argument ist der Wert des Eingabefelds. `this` zeigt auf die TextField-Instanz. Die Funktion wird erst ausgeführt, nachdem die native Browser-Validierungs-API erfolgreich durchlaufen wurde. Kann einen `boolean` zurückgeben: `false` bedeutet Validierungsfehler, `true` bedeutet Validierung erfolgreich. Kann auch einen String zurückgeben. Ein nicht-leerer String bedeutet Validierungsfehler, der zurückgegebene String wird als Fehlermeldung verwendet. Kann auch ein Promise zurückgeben. Ein aufgelöstes Promise steht für eine erfolgreiche Validierung; bei einem rejected Promise liegt ein Validierungsfehler vor, und der Ablehnungsgrund wird als Fehlermeldung verwendet.
`textFieldOptions`	`Partial<TextField>`	-
Das Eingabefeld im Prompt ist die Komponente `<mdui-text-field>`. In diesem Parameter können die Parameter der `<mdui-text-field>`-Komponente gesetzt werden.

Vorherige Seite

confirm

Nächste Seite

snackbar