DialogДиалоговое окно

Диалоговое окно используется для отображения важных уведомлений в процессе выполнения действий пользователем.

Помимо прямого использования этого компонента, mdui предоставляет четыре функции: mdui.dialog, mdui.alert, mdui.confirm, mdui.prompt. Эти функции упрощают использование компонента Dialog.

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

При необходимости импортируйте компонент:

import 'mdui/components/dialog.js';

При необходимости импортируйте типы TypeScript:

import type { Dialog } from 'mdui/components/dialog.js';

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

Dialog Закрыть

Открыть диалог

<mdui-dialog class="example-dialog">
  Dialog
  <mdui-button>Закрыть</mdui-button>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-dialog");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Примеры

Закрытие по клику на фон

Добавьте атрибут close-on-overlay-click, чтобы диалоговое окно закрывалось при клике на фон.

Dialog

Открыть диалог

<mdui-dialog close-on-overlay-click class="example-overlay">Dialog</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-overlay");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Закрытие по нажатию клавиши ESC

Добавьте атрибут close-on-esc, чтобы диалоговое окно закрывалось при нажатии клавиши ESC.

Dialog

Открыть диалог

<mdui-dialog
  close-on-esc
  close-on-overlay-click
  class="example-esc"
>Dialog</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-esc");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Полноэкранный режим

Добавьте атрибут fullscreen, чтобы диалоговое окно отображалось полноэкранно.

Dialog Закрыть

Открыть диалог

<mdui-dialog fullscreen class="example-fullscreen">
  Dialog
  <mdui-button>Закрыть</mdui-button>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-fullscreen");
  const openButton = dialog.nextElementSibling;
  const closeButton = dialog.querySelector("mdui-button");

  openButton.addEventListener("click", () => dialog.open = true);
  closeButton.addEventListener("click", () => dialog.open = false);
</script>

Исходный код

Иконка

Установите атрибут icon, чтобы добавить иконку Material Icons в верхнюю часть диалогового окна.

Dialog

Открыть диалог

<mdui-dialog
  icon="restart_alt"
  close-on-overlay-click
  class="example-icon"
>Dialog</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Также можно добавить элемент иконки в верхнюю часть через слот icon.

Dialog

Открыть диалог

<mdui-dialog close-on-overlay-click class="example-icon-slot">
  Dialog
  <mdui-icon slot="icon" name="restart_alt"></mdui-icon>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-icon-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Заголовок и описание

Установите заголовок и описание диалогового окна через атрибуты headline и description.

Открыть диалог

<mdui-dialog
  headline="Delete selected images?"
  description="Images will be permanently removed from your account and all synced devices."
  close-on-overlay-click
  class="example-headline"
></mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Также можно установить элемент заголовка и описания через слоты headline и description.

Delete selected images? Images will be permanently removed from your account and all synced devices.

Открыть диалог

<mdui-dialog close-on-overlay-click class="example-headline-slot">
  <span slot="headline">Delete selected images?</span>
  <span slot="description">Images will be permanently removed from your account and all synced devices.</span>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-headline-slot");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Кнопки действий внизу

Вы можете добавить кнопки действий внизу через слот action.

Отмена

Удалить

Открыть диалог

<mdui-dialog
  close-on-overlay-click
  headline="Delete selected images?"
  class="example-action"
>
  <mdui-button slot="action" variant="text">Отмена</mdui-button>
  <mdui-button slot="action" variant="tonal">Удалить</mdui-button>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-action");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Добавьте атрибут stacked-actions, чтобы кнопки действий располагались вертикально.

Turn on speed boost

No thanks

Открыть диалог

<mdui-dialog
  stacked-actions
  close-on-overlay-click
  headline="Use location service?"
  class="example-stacked-actions"
>
  <mdui-button slot="action" variant="text">Turn on speed boost</mdui-button>
  <mdui-button slot="action" variant="text">No thanks</mdui-button>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-stacked-actions");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

Верхнее содержимое

Вы можете задать верхнее содержимое диалогового окна через слот header.

Title

Save

Открыть диалог

<mdui-dialog close-on-overlay-click class="example-header">
  <mdui-top-app-bar slot="header">
    <mdui-button-icon icon="close"></mdui-button-icon>
    <mdui-top-app-bar-title>Title</mdui-top-app-bar-title>
    <mdui-button variant="text">Save</mdui-button>
  </mdui-top-app-bar>
  <div style="height: 100px"></div>
</mdui-dialog>

<mdui-button>Открыть диалог</mdui-button>

<script>
  const dialog = document.querySelector(".example-header");
  const openButton = dialog.nextElementSibling;

  openButton.addEventListener("click", () => dialog.open = true);
</script>

Исходный код

API

Свойства

Атрибут	Свойство	Тип	По умолчанию
`icon`	`icon`	`string`	-
Имя иконки Material Icons вверху. Можно задать через `slot="icon"`.
`headline`	`headline`	`string`	-
Заголовок. Можно задать через `slot="headline"`.
`description`	`description`	`string`	-
Текст под заголовком. Можно задать через `slot="description"`.
`open`	`open`	`boolean`	`false`
Определяет, открыто ли диалоговое окно.
`fullscreen`	`fullscreen`	`boolean`	`false`
Определяет, отображать ли диалоговое окно на весь экран.
`close-on-esc`	`closeOnEsc`	`boolean`	`false`
Определяет, нужно ли закрывать при нажатии клавиши ESC.
`close-on-overlay-click`	`closeOnOverlayClick`	`boolean`	`false`
Определяет, нужно ли закрывать при клике на затемнение.
`stacked-actions`	`stackedActions`	`boolean`	`false`
Определяет, располагать ли кнопки действий вертикально.

События

Название
`open`
Срабатывает в начале открытия диалогового окна. Можно отменить открытие, вызвав `event.preventDefault()`.
`opened`
Срабатывает после завершения анимации открытия диалогового окна.
`close`
Срабатывает в начале закрытия диалогового окна. Можно отменить закрытие, вызвав `event.preventDefault()`.
`closed`
Срабатывает после завершения анимации закрытия диалогового окна.
`overlay-click`
Срабатывает при клике на затемнение.

Slots

Название
`header`
Элемент вверху, по умолчанию содержит слоты `icon` и `headline`.
`icon`
Иконка вверху.
`headline`
Заголовок вверху.
`description`
Текст под заголовком.
(по умолчанию)
Основное содержимое диалогового окна.
`action`
Элементы в нижней панели действий.

CSS Parts

Название
`overlay`
Затемнение.
`panel`
Контейнер диалогового окна.
`header`
Часть заголовка диалогового окна, содержит icon и headline.
`icon`
Иконка вверху, находится в header.
`headline`
Заголовок вверху, находится в header.
`body`
Часть body диалогового окна.
`description`
Часть дополнительного текста, находится в body.
`action`
Кнопки действий.

Пользовательские CSS-свойства

Название
`--shape-corner`
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
`--z-index`
Значение CSS `z-index` компонента.

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

Collapse Раскрывающийся блок

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

Divider Разделитель