Dialog API

Эта страница предоставляет обзор API компонента Dialog, детализируя его props, emits, слоты и exposed методы/состояния.

Props

Компонент Dialog принимает следующие props:

Prop	Default	Type	Description
`modelValue`	`false`	`boolean`	Управляет видимостью диалога.
`size`	`"2xl"`	`Size` or `undefined`	Размер диалога, который определяет его ширину.
`position`	`"center"`	`PositionShort` or `undefined`	Позиция диалога на экране.
`notAnimate`	`false`	`boolean` or `undefined`	Отключает анимации для диалога.
`closeButton`	`false`	`boolean` or `undefined`	Включает кнопку закрытия внутри диалога.
`withoutMargin`	`false`	`boolean` or `undefined`	Удаляет стандартные отступы внутри диалога.
`notCloseBackground`	`false`	`boolean` or `undefined`	Предотвращает закрытие диалога при нажатии на фон.
`toTeleport`	`"body"`	`string` or `undefined`	Указывает целевой элемент для телепортации диалога.
`class`	`""`	`StyleClass` or `undefined`	Пользовательский CSS класс для контейнера диалога.
`classBody`	`""`	`StyleClass` or `undefined`	Пользовательский CSS класс для тела диалога.

Компонент Dialog предоставляет следующие слоты:

Slot	Payload	Description
`default`	`{ closeDialog(): void }`	Слот для предоставления основного содержимого диалога. Включает метод для закрытия диалога.
`background`	None	Слот для настройки фона диалога. Если оставить пустым, фон будет прозрачным.

Компонент Dialog испускает следующие события:

Event	Payload	Description
`update:modelValue`	`boolean`	Испускается при обновлении `modelValue`, указывая состояние видимости диалога.

Компонент Dialog предоставляет следующие методы и состояния через ref:

Expose	Value	Description
`toTeleport`	`string`	Целевой элемент для телепортации диалога.
`isOpen`	`boolean`	Указывает, открыт ли диалог.
`size`	`string`	Текущий размер диалога.
`isCloseButton`	`boolean`	Указывает, включена ли кнопка закрытия.
`notCloseBackground`	`boolean`	Указывает, закрывается ли диалог при нажатии на фон.
`withoutMargin`	`boolean`	Указывает, удалены ли отступы у диалога.
`position`	`string`	Текущая позиция диалога.
`classBodyDialog`	`StyleClass`	CSS класс для тела диалога.
`classPosition`	`StyleClass`	CSS класс для стилизации позиции диалога.
`classBase`	`StyleClass`	Базовый CSS класс для контейнера диалога.
`classDialog`	`StyleClass`	CSS класс для самого диалога.
`closeDialog`	`() => void`	Закрывает диалог.

Prop size принимает следующие значения для определения ширины диалога:

xs, sm, md, lg, xl, 2xl (по умолчанию), 3xl, 4xl, 5xl, 6xl, 7xl

Тип PositionShort определяет относительное положение диалога на экране:

Value	Description
`"center"`	Центрирует диалог на экране.
`"top"`	Позиционирует диалог в верхней части экрана.
`"bottom"`	Позиционирует диалог в нижней части экрана.
`"left"`	Позиционирует диалог на левой стороне экрана.
`"right"`	Позиционирует диалог на правой стороне экрана.
`"bottom-left"`	Позиционирует диалог в левом нижнем углу.
`"top-left"`	Позиционирует диалог в левом верхнем углу.
`"bottom-right"`	Позиционирует диалог в правом нижнем углу.
`"top-right"`	Позиционирует диалог в правом верхнем углу.