confirm

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

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

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

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

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

open

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

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

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

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

API

confirm(options: Options): Promise<void>

Функция принимает объект Options в качестве параметра; возвращает Promise. Если окно закрыто нажатием кнопки подтверждения, Promise будет выполнен (resolve), если закрыто другим способом — отклонён (reject).

Options

Имя свойства	Тип	Значение по умолчанию
`headline`	`string`	-
Заголовок confirm
`description`	`string`	-
Описательный текст confirm
`icon`	`string`	-
Название иконки Material Icons в верхней части confirm
`closeOnEsc`	`boolean`	`false`
Закрывать ли confirm при нажатии клавиши ESC
`closeOnOverlayClick`	`boolean`	`false`
Закрывать ли confirm при клике на оверлей
`confirmText`	`string`	`OK`
Текст кнопки подтверждения
`cancelText`	`string`	`Cancel`
Текст кнопки отмены
`stackedActions`	`boolean`	`false`
Располагать ли кнопки действий вертикально
`queue`	`string`	-
Имя очереди. По умолчанию очередь не используется; при многократном вызове функции будет одновременно отображаться несколько confirm. Вы можете передать имя очереди в этом параметре. Функции confirm с одинаковым именем очереди будут открывать следующий confirm только после закрытия предыдущего. Если у функций `dialog()`, `alert()`, `confirm()` и `prompt()` указано одно и то же имя очереди, они также будут использовать общую очередь.
`onConfirm`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Функция обратного вызова при нажатии кнопки подтверждения. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога. По умолчанию после нажатия кнопки подтверждения confirm закрывается; если возвращается `false`, confirm не закрывается; если возвращается promise, confirm закроется после его выполнения (resolve).
`onCancel`	`(dialog: Dialog) => void \| boolean \| Promise<void>`	-
Функция обратного вызова при нажатии кнопки отмены. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога. По умолчанию после нажатия кнопки отмены confirm закрывается; если возвращается `false`, confirm не закрывается; если возвращается promise, confirm закроется после его выполнения (resolve).
`onOpen`	`(dialog: Dialog) => void`	-
Функция обратного вызова при начале открытия confirm. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onOpened`	`(dialog: Dialog) => void`	-
Функция обратного вызова по завершении анимации открытия confirm. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onClose`	`(dialog: Dialog) => void`	-
Функция обратного вызова при начале закрытия confirm. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onClosed`	`(dialog: Dialog) => void`	-
Функция обратного вызова по завершении анимации закрытия confirm. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.
`onOverlayClick`	`(dialog: Dialog) => void`	-
Функция обратного вызова при клике на оверлей. Параметр функции — экземпляр диалога, `this` также указывает на экземпляр диалога.

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

alert

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

prompt