dialog

Функция dialog является обёрткой для компонента <mdui-dialog>. С её помощью вы можете открыть диалоговое окно без написания HTML-кода компонента.

Использование

Импортируйте функцию по мере необходимости:

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

Пример использования:

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

Функция принимает объект Options в качестве параметра; возвращает экземпляр компонента <mdui-dialog>.

Options

Имя свойства	Тип	Значение по умолчанию
`headline`	`string`	-
Заголовок диалога
`description`	`string`	-
Описательный текст диалога
`body`	`string` \| `HTMLElement` \| `JQ<HTMLElement>`	-
Содержимое тела диалога. Может быть HTML-строкой, DOM-элементом или JQ-объектом.
`icon`	`string`	-
Название иконки Material Icons в верхней части диалога
`closeOnEsc`	`boolean`	`false`
Закрывать ли диалог при нажатии клавиши ESC
`closeOnOverlayClick`	`boolean`	`false`
Закрывать ли диалог при клике на оверлей
`actions`	`Action[]`	-
Массив кнопок действий в нижней части
`stackedActions`	`boolean`	`false`
Располагать ли кнопки действий вертикально
`queue`	`string`	-
Имя очереди. По умолчанию очередь не используется; при многократном вызове функции будет одновременно отображаться несколько диалогов. Вы можете передать имя очереди в этом параметре. Функции dialog с одинаковым именем очереди будут открывать следующий диалог только после закрытия предыдущего. Если у функций `dialog()`, `alert()`, `confirm()` и `prompt()` указано одно и то же имя очереди, они также будут использовать общую очередь.
`onOpen`	`(dialog: Dialog) => void`	-
Функция обратного вызова при начале открытия диалога. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onOpened`	`(dialog: Dialog) => void`	-
Функция обратного вызова по завершении анимации открытия диалога. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onClose`	`(dialog: Dialog) => void`	-
Функция обратного вызова при начале закрытия диалога. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onClosed`	`(dialog: Dialog) => void`	-
Функция обратного вызова по завершении анимации закрытия диалога. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Функция обратного вызова при клике на оверлей. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.

Action

Имя свойства	Тип	Значение по умолчанию
`text`	`string`	-
Текст кнопки
`onClick`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Функция обратного вызова при нажатии кнопки. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога. По умолчанию после нажатия кнопки диалог закрывается; если возвращается `false`, диалог не закрывается; если возвращается promise, диалог закроется после его выполнения (resolve).

Предыдущая глава

Библиотека jq

Следующая глава

alert