alert

The alert function wraps the <mdui-dialog> component, replaces the native window.alert function, and lets you create alert dialogs without writing any HTML.

Usage

Import the function:

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

Example:

open

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

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

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

  button.addEventListener("click", () => {
    alert({
      headline: "Alert Title",
      description: "Alert description",
      confirmText: "OK",
      onConfirm: () => console.log("confirmed"),
    });
  });
</script>

API

alert(options: Options): Promise<void>

The alert function takes an Options object and returns a Promise. The Promise resolves when the confirm button closes the dialog and rejects if the dialog is closed any other way.

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.
`queue`	`string`	-
The queue name. Queues are disabled by default. If this function is called multiple times, multiple dialogs will appear simultaneously. If you provide a queue name, dialogs with the same name open one after another. The `dialog()`, `alert()`, `confirm()`, and `prompt()` functions share the same queue if their queue names match.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Called when the confirm button is clicked. The callback receives the dialog instance as its argument, and `this` also refers to it. 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.
`onOpen`	`(dialog: Dialog) => void`	-
Called when the dialog starts to open. The callback receives the dialog instance as its argument, and `this` also refers to it.
`onOpened`	`(dialog: Dialog) => void`	-
Called when the dialog's open animation completes. The callback receives the dialog instance as its argument, and `this` also refers to it.
`onClose`	`(dialog: Dialog) => void`	-
Called when the dialog starts to close. The callback receives the dialog instance as its argument, and `this` also refers to it.
`onClosed`	`(dialog: Dialog) => void`	-
Called when the dialog's close animation completes. The callback receives the dialog instance as its argument, and `this` also refers to it.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Called when the overlay is clicked. The callback receives the dialog instance as its argument, and `this` also refers to it.

dialog

confirm