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.

MDUIDocsEnglish简体中文LightDarkSystem
Preset Colors
Custom Color
Extract Color from Wallpaper
Select a Wallpaper
Getting Started
Introduction Installation Usage TypeScript Support IDE Support Localization Frequently Asked Questions
Styles
Dark Theme Dynamic Theme Typography Design Tokens
Frameworks
React Vue Angular
Components
Button ButtonIcon Fab SegmentedButton Chip Card Checkbox Radio Switch Slider RangeSlider List Collapse Tabs Dropdown Menu Select TextField LinearProgress CircularProgress Dialog Divider Avatar Badge Icon Tooltip Snackbar NavigationBar NavigationDrawer NavigationRail BottomAppBar TopAppBar Layout
Functions
JavaScript Library dialog alert confirm prompt snackbar getTheme setTheme getColorFromImage setColorScheme removeColorScheme loadLocale setLocale getLocale throttle observeResize breakpoint
Libraries
@mdui/icons