prompt

The prompt function, a wrapper for the <mdui-dialog> component. It offers a more user-friendly alternative to the native window.prompt function. This function allows you to open a dialog with a text field without the need to write HTML code for the component.

Usage

Import the function:

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

Example:

open

<mdui-button class="example-button">open</mdui-button>

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

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

  button.addEventListener("click", () => {
    prompt({
      headline: "Prompt Title",
      description: "Prompt description",
      confirmText: "OK",
      cancelText: "Cancel",
      onConfirm: (value) => console.log("confirmed: " + value),
      onCancel: () => console.log("canceled"),
    });
  });
</script>

API

prompt(options: Options): Promise<string>

The function accepts an Options object as a parameter and returns a Promise. If the dialog is closed by clicking the confirm button, the Promise resolves with the value entered in the text field. If the dialog is closed in any other way, the Promise is rejected.

Options

Property	Type	Default
`headline`	`string`	-
The title of the dialog.
`description`	`string`	-
The description of the dialog.
`icon`	`string`	-
The Material Icons name displayed at the top of the dialog.
`closeOnEsc`	`boolean`	`false`
Whether the dialog can be closed by pressing the Esc key. If set to `true`, the dialog closes when the Esc key is pressed.
`closeOnOverlayClick`	`boolean`	`false`
Whether the dialog can be closed by clicking on the overlay.
`confirmText`	`string`	`OK`
The text for the confirm button.
`cancelText`	`string`	`Cancel`
The text for the cancel button.
`stackedActions`	`boolean`	`false`
Whether to stack the bottom action buttons vertically.
`queue`	`string`	-
The queue name. By default, the queue is disabled. If this function is invoked multiple times, multiple dialogs will appear simultaneously. If a queue name is provided, dialogs with the same queue name will open sequentially, each one after the previous one closes. The `dialog()`, `alert()`, `confirm()`, and `prompt()` functions share the same queue if their queue names match.
`onConfirm`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
A callback function that is triggered when the confirm button is clicked. The function receives the value of the text field and the dialog instance as parameters, and `this` refers to the dialog instance. By default, clicking the confirm button closes the dialog. If the return value is `false`, the dialog remains open. If the return value is a promise, the dialog closes after the promise resolves.
`onCancel`	`(value: string, dialog: Dialog) => void \| boolean \| Promise<void>`	-
A callback function that is triggered when the cancel button is clicked. The function receives the value of the text field and the dialog instance as parameters, and `this` refers to the dialog instance. By default, clicking the cancel button closes the dialog. If the return value is `false`, the dialog remains open. If the return value is a promise, the dialog closes after the promise resolves.
`onOpen`	`(dialog: Dialog) => void`	-
A callback function that is triggered when the dialog starts to open. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance.
`onOpened`	`(dialog: Dialog) => void`	-
A callback function that is triggered when the dialog's opening animation completes. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance.
`onClose`	`(dialog: Dialog) => void`	-
A callback function that is triggered when the dialog starts to close. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance.
`onClosed`	`(dialog: Dialog) => void`	-
A callback function that is triggered when the dialog's closing animation completes. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance.
`onOverlayClick`	`(dialog: Dialog) => void`	-
A callback function that is triggered when the overlay is clicked. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance.
`validator`	`(value: string) => boolean \| string \| Promise<void>`	-
A validation function for the text field, takes the text field's value as a parameter. `this` refers to the TextField instance. Validation is executed after the browser's native validation API is successfully passed. If it returns a `boolean` value, `false` indicates a validation failure, and `true` indicates a validation success. If it returns a string, a non-empty string indicates a validation failure, with the returned string serving as the error message. If it returns a Promise, a resolution indicates validation success, while a rejection indicates validation failure. The reason for rejection is used as the error message.
`textFieldOptions`	`Partial<TextField>`	-
The internal text field is a `<mdui-text-field>` component. You can configure the `<mdui-text-field>` component using this parameter.

confirm

Up Next

snackbar