Диалог
Компонент v-dialog информирует пользователей о конкретной задаче и может содержать критическую информацию, принимать решения или включать несколько задач. Используйте диалоги экономно, потому что они прерываются.
Применение
A dialog contains two slots, one for its activator and one for its content (default). Good for Privacy Policies.
API
Указывает, какой элемент DOM должен отделить этот компонент. Используйте либо селектор CSS, либо ссылку на объект для элемента.
Применяет пользовательский класс к отдельному элементу. Это полезно, потому что содержимое перемещается в конец приложения и не является таргетингом по классам, переданным непосредственно в компонент.
Components.Dialogs.
Отключено возможность открытия диалога
Указывает, что модальное действие 100% ширины
Изменение макета для полноэкранного отображения
Скрыть отображение наложения
Условно отображает контент на смонтированном. Будет показывать только контент, если он активирован
Components.Dialogs.
Максимальная ширина содержимого
Components.Dialogs.
Устанавливает начало перехода
Клик снаружи не отменяет диалог
Components.Dialogs.
Если установлено значение true, ожидается карта, название карты, текст карты и действия карты. Кроме того, текст карты должен иметь указанную высоту. Устанавливает перенос текста карты на переполнение
Устанавливает компонентный переход. Может быть одним из встроенных переходов или вашим собственным.
Контроль видимости
Устанавливает ширину диалогового окна
Примеры
Без активатора
Если по какой-то причине вы не можете использовать слот активатора, обязательно добавьте модификатор .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.