Dialog

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

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

Чтобы начать работу, вам нужно управлять видимостью диалога с помощью директивы v-model и настраивать другие параметры, такие как size, position и другие.

Управление видимостью

Используйте директиву v-model для привязки видимости диалога к реактивной переменной.

<Button @click="dialog = true">Открыть диалог</Button>
<Dialog v-model="dialog">
  Диалог открыт.
</Dialog>

Размер диалога

Вы можете регулировать размер диалога с помощью свойства size. Доступные варианты: xs, sm, md, lg, xl, 2xl, 3xl и другие.

<Dialog v-model="smallDialog" size="sm">Маленький диалог</Dialog>
<Dialog v-model="largeDialog" size="lg">Большой диалог</Dialog>

Позиционирование

Управляйте местом появления диалога на экране с помощью свойства position. Варианты включают center, top, bottom, left, right или комбинации, такие как top-left.

<Dialog v-model="dialog" position="center">Диалог по центру</Dialog>
<Dialog v-model="dialog" position="bottom-right">Диалог в правом нижнем углу</Dialog>

Кнопка закрытия

Включите кнопку закрытия внутри диалога, установив свойство closeButton в значение true.

<Dialog v-model="dialog" closeButton>
  В этом диалоге есть кнопка закрытия.
</Dialog>

Взаимодействие с фоном

Предотвратите закрытие диалога при нажатии на фон с помощью свойства notCloseBackground. Это особенно полезно в сценариях, где пользователь должен предоставить ввод или выполнить определенное действие (например, нажать кнопку), прежде чем диалог может быть закрыт. Это гарантирует, что диалог останется открытым до явного взаимодействия.

<Dialog v-model="backgroundDialog" :notCloseBackground="true">
  <h2>Требуется важное действие</h2>
  <p>Пожалуйста, подтвердите свой выбор перед закрытием этого диалога.</p>
  <button @click="backgroundDialog = false">Подтвердить</button>
</Dialog>

Удаление отступов

Если вы хотите, чтобы у диалога не было стандартных отступов, установите свойство withoutMargin в значение true.

<Dialog v-model="noMarginDialog" :withoutMargin="true">
  В этом диалоге нет отступов.
</Dialog>

Отключение анимаций

Отключите все анимации для диалога, включив свойство notAnimate.

<Dialog v-model="noAnimationDialog" :notAnimate="true">
  В этом диалоге нет анимаций.
</Dialog>

Целевой элемент для телепортации

Укажите, куда в DOM должен быть вставлен диалог, с помощью свойства toTeleport. По умолчанию это "body".

<Dialog v-model="teleportDialog" toTeleport="#custom-target">
  Этот диалог телепортируется в пользовательский элемент DOM.
</Dialog>

Пользовательские классы

Настройте внешний вид диалога с помощью свойств class и classBody.

<Dialog
    v-model="dialog"
    class="custom-dialog-class"
    classBody="custom-dialog-body-class">
  ...
</Dialog>

Настройка фона

Вы можете настроить фон диалога с помощью слота background или применить пользовательские стили к фону. Фон можно стилизовать любым способом, обеспечивая гибкость для ваших потребностей в дизайне.

Например, если вы объявите слот background, но оставите его пустым, диалог не будет иметь фона вообще, что приведет к полностью прозрачному фону. Это может быть полезно для создания минималистичных или полностью пользовательских визуальных эффектов.

<template>
  <Dialog v-model="backgroundCustomDialog">
    <template #background>
      <!-- Пустой слот фона создает прозрачный фон -->
    </template>
    <p>Этот диалог имеет полностью прозрачный фон.</p>
  </Dialog>
</template>

Вы также можете добавить стилизованный фон, определив пользовательское содержимое в слоте background.

<template>
  <Dialog v-model="backgroundCustomDialog">
    <template #background>
      <div class="custom-background"></div>
    </template>
    <p>Этот диалог имеет пользовательский фон.</p>
  </Dialog>
</template>