prompt

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

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

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

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

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

open

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

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

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

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

API

prompt(options: Options): Promise<string>

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

Options

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

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

confirm

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

snackbar