dialog

The dialog function, a wrapper for the <mdui-dialog> component. It offers a more convenient way to open a dialog without the need to write HTML code for the component.

Usage

Import the function:

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

Example:

open

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

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

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

  button.addEventListener("click", () => {
    dialog({
      headline: "Dialog Title",
      description: "Dialog description",
      actions: [
        {
          text: "Cancel",
        },
        {
          text: "OK",
          onClick: () => {
            console.log("confirmed");
            return false;
          },
        }
      ]
    });
  });
</script>

API

dialog(options: Options): Dialog

The dialog function accepts an Options object as a parameter and returns an instance of the <mdui-dialog> component.

Options

Property	Type	Default
`headline`	`string`	-
The title of the dialog.
`description`	`string`	-
The description of the dialog.
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
The content of the dialog's body, accepts HTML string, DOM element, or a JQ object.
`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.
`actions`	`Action[]`	-
The array of bottom action buttons.
`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.
`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.

Action

Property	Type	Default
`text`	`string`	-
Button text.
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
A callback function that is triggered when the button is clicked. The function receives the dialog instance as a parameter, and `this` also refers to the dialog instance. By default, clicking the 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.

JavaScript Library

Up Next

alert