# Dialog ## Кратко `Dialog` — [составной компонент](https://vega-ui.dev/ru/docs/glossary/#составной-компонент-compound-component) для модальных оверлеев с частями корня, триггера и содержимого. `DialogClose` превращает вашу собственную кнопку в кнопку закрытия; заголовки и раскладка — обычная разметка, которую вы собираете сами. `DialogContent` рендерит нативный ``, открытый через `showModal()`, поэтому браузер помещает его в верхний слой (top layer), делает остальную страницу инертной и рисует подложку. Это самый сильный оверлей общего назначения в семействе; выбирайте его, когда модальное прерывание задумано намеренно. ## Импорты ```tsx import { Dialog, DialogTrigger, DialogContent, DialogClose, type DialogProps, } from '@vega-ui/react'; ``` ## Экспортируемые типы - `DialogProps` - `DialogTriggerProps` - `DialogContentProps` - `DialogCloseProps` ## Минимальная композиция ```tsx import { useId, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const destructive = { '--button-background-color': 'var(--color-red-accent-500)', '--button-background-color-hover': 'var(--color-red-accent-600)', '--button-background-color-active': 'var(--color-red-accent-700)', } as CSSProperties; export default function MinimalComposition() { const titleId = useId(); return (
Leave Northwind Studio?
You will lose access to 14 projects until an admin invites you again.
); } ``` ## Обязательные части - `Dialog`: корневое состояние и провайдер контекста - `DialogTrigger`: поверхность действия открытия - `DialogContent`: контейнер модального содержимого ## Необязательные части - `DialogClose`: закрывает диалог по клику; оборачивает вашу собственную кнопку через `asChild` ## Ваша собственная разметка - заголовок, чей `id` передаётся в `DialogContent` как `aria-labelledby` (или `aria-label` на `DialogContent`); у диалога обязательно должно быть имя - кнопки действий, отвечающие на диалог («Отмена», «Подтвердить»), внутри `
` ## Порядок композиции Типичная композиция: 1. `Dialog` 2. `DialogTrigger` 3. `DialogContent` с вашим заголовком, необязательным `DialogClose`, основным содержимым и `` для кнопок действий ## Варианты - Контролируемое состояние открытия или управление через триггер - Минимальный диалог только с содержимым или диалог со строкой шапки и кнопкой закрытия - Диалог с фиксированным содержимым или с прокручиваемым либо резиновым содержимым ## Миграция с 2.x `DialogHeader`, `DialogTitle` и `DialogCloseButton` удалены: библиотека оставляет только части с поведением, которое нельзя выразить обычной разметкой. `DialogClose` — замена кнопки закрытия, отвечающая только за поведение. - `DialogHeader` → ваш собственный элемент раскладки, например flex-строка - `DialogTitle` → `Heading` с `id`, на который ссылается `aria-labelledby` на `DialogContent` - `DialogCloseButton` → `DialogClose asChild` вокруг вашей собственной кнопки, например `IconButton` с `aria-label` - `useDialogContext()` больше не возвращает `contentId` и `titleId`, а `DialogTrigger` больше не выставляет `aria-controls` ## Пограничные случаи - Вложенные оверлеи нужно проверять на восстановление фокуса и порядок наложения. - Длинное содержимое должно прокручиваться, не скрывая основные действия. - Диалог должен быть назван через `aria-labelledby` или `aria-label`. - Делайте поведение закрытия явным, если в диалоге есть формы или необратимые действия. - Если содержимое начинает выглядеть как полноценный сценарий на целую страницу, выдвижная панель (Drawer), шторка (Sheet) или отдельный маршрут могут оказаться понятнее большого диалога. ## Частые ошибки - Оставлять `DialogContent` без `aria-labelledby` или `aria-label`. - Помещать критичное содержимое страницы в диалог без удобной мобильной раскладки. - Не проверять поведение диалога внутри других оверлеев. - Считать длинное содержимое диалога статичным, не проверив прокрутку и видимость действий. ## Примеры ### Базовый #### Базовый: подтверждение удаления файла Кнопки «Отмена» и «Удалить» лежат в ``, поэтому любая из них закрывает диалог, а её `value` становится `returnValue` диалога. Страница читает его в `onClose`, после анимации закрытия, и только тогда удаляет файл; `Escape` и кнопка закрытия оставляют `returnValue` пустым. ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const destructive = { '--button-background-color': 'var(--color-red-accent-500)', '--button-background-color-hover': 'var(--color-red-accent-600)', '--button-background-color-active': 'var(--color-red-accent-700)', } as CSSProperties; export default function ConfirmAction() { const titleId = useId(); const descriptionId = useId(); const [deleted, setDeleted] = useState(false); return (
{deleted ? ( <> Q3 board deck.pdf moved to trash. ) : ( <>
Q3 board deck.pdf 4.2 MB · Edited yesterday
setDeleted(event.currentTarget.returnValue === 'delete')} >
Delete Q3 board deck.pdf?
The file stays in trash for 30 days. Shared links stop working right away. )}
); } ``` ### Контролируемый/с состоянием #### Контролируемый/с состоянием: один диалог для многих строк Каждая строка открывает один и тот же контролируемый диалог со своим счётом. Родитель владеет и `open`, и выбранной строкой, а нативный `` возвращает фокус на кнопку, которая его открыла. ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const invoices = [ { number: 'INV-2041', customer: 'Acme Logistics', amount: '$12,480.00', due: 'Nov 14, 2026' }, { number: 'INV-2042', customer: 'Blue Harbor Cafe', amount: '$860.50', due: 'Nov 21, 2026' }, { number: 'INV-2043', customer: 'Kestrel Robotics', amount: '$4,125.00', due: 'Dec 1, 2026' }, ]; export default function ControlledOpenState() { const titleId = useId(); const [open, setOpen] = useState(false); const [selected, setSelected] = useState(invoices[0]); const openInvoice = (invoice: typeof invoices[number]) => { setSelected(invoice); setOpen(true); }; return (
    {invoices.map((invoice, index) => (
  • 0 ? '1px solid var(--separator-opaque)' : undefined, }} >
    {invoice.customer} {invoice.number} · {invoice.amount}
    • ))}
Dialog: {open ? `open, showing ${selected.number}` : 'closed'}
{selected.number}
Customer
{selected.customer}
Amount
{selected.amount}
Due
{selected.due}
); } ``` #### Контролируемый/с состоянием: диалог не закрывается, пока есть несохранённые изменения Каждый запрос на закрытие (`Escape`, кнопка закрытия, «Отмена») проходит через `onChangeOpen(false)`. Пока в заметке есть несохранённые правки, родитель отвечает на первый запрос предупреждением, а не закрытием; второй запрос отбрасывает черновик. ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Dialog, DialogClose, DialogContent, DialogTrigger, Heading, HelperText, Icon, IconButton, Label, Text, TextArea, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function UnsavedChangesGuard() { const titleId = useId(); const fieldId = useId(); const warningId = useId(); const [open, setOpen] = useState(false); const [saved, setSaved] = useState('Call back after the Friday standup.'); const [draft, setDraft] = useState(saved); const [confirming, setConfirming] = useState(false); const dirty = draft !== saved; const changeOpen = (next: boolean) => { if (next) { setDraft(saved); setConfirming(false); setOpen(true); return; } if (dirty && !confirming) { setConfirming(true); return; } setOpen(false); }; const save = () => { setSaved(draft); setOpen(false); }; return (
Note for Maria Chen {saved}
Note for Maria Chen