Диалог

Компонент v-dialog информирует пользователей о конкретной задаче и может содержать критическую информацию, принимать решения или включать несколько задач. Используйте диалоги экономно, потому что они прерываются.

Применение

A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.

API

v-dialog
Имя
attach
По умолчанию
false
Тип
any

Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.

Имя
content-class
По умолчанию
undefined
Тип
any

Применяет пользовательский класс к отдельному элементу. Это полезно, потому что содержимое перемещается в конец приложения и не является таргетингом по классам, переданным непосредственно в компонент.

Имя
dark
По умолчанию
false
Тип
boolean

Components.Dialogs.

Имя
disabled
По умолчанию
false
Тип
boolean

Отключено возможность открытия диалога

Имя
full-width
По умолчанию
false
Тип
boolean

Указывает, что модальное действие 100% ширины

Имя
fullscreen
По умолчанию
false
Тип
boolean

Изменение макета для полноэкранного отображения

Имя
hide-overlay
По умолчанию
false
Тип
boolean

Скрыть отображение наложения

Имя
lazy
По умолчанию
false
Тип
boolean

Условно отображает контент на смонтированном. Будет показывать только контент, если он активирован

Имя
light
По умолчанию
false
Тип
boolean

Components.Dialogs.

Имя
max-width
По умолчанию
none
Тип
string | number

Максимальная ширина содержимого

Имя
no-click-animation New in — v1.1
По умолчанию
false
Тип
boolean

Components.Dialogs.

Имя
origin
По умолчанию
'center center'
Тип
string

Устанавливает начало перехода

Имя
persistent
По умолчанию
false
Тип
boolean

Клик снаружи не отменяет диалог

Имя
return-value
По умолчанию
undefined
Тип
any

Components.Dialogs.

Имя
scrollable
По умолчанию
false
Тип
boolean

Если установлено значение true, ожидается карта, название карты, текст карты и действия карты. Кроме того, текст карты должен иметь указанную высоту. Устанавливает перенос текста карты на переполнение

Имя
transition
По умолчанию
dialog-transition
Тип
string | boolean

Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.

Имя
value
По умолчанию
undefined
Тип
any

Контроль видимости

Имя
width
По умолчанию
auto
Тип
string | number

Устанавливает ширину диалогового окна

Примеры

Без активатора

Если по какой-то причине вы не можете использовать слот активатора, обязательно добавьте модификатор .stop в событие, которое запускает диалог.

Модальный

Подобно простому диалогу, за исключением того, что он не убирается при касании снаружи.

Полноэкранный

Из-за ограниченного пространства полноэкранные диалоги могут быть более подходящими для мобильных устройств, чем диалоги, используемые на устройствах с большими экранами.

Форма

Просто простой пример формы в диалоговом окне.

Прокручиваемый

Пример диалога с прокручиваемым контентом.

Переполнение

Модификации, которые не помещаются в доступное пространство окна, будут прокручивать контейнер.

Simple dialogs

Choosing an option immediately closes the menu. Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog.

Loader

The v-dialog component makes it easy to create a customized loading experience for your application.

Edit this page | language on Github