# Drawer ## Кратко `Drawer` — [составной компонент](https://vega-ui.dev/ru/docs/glossary/#составной-компонент-compound-component) для выдвижных панелей (Drawer), прикреплённых к краю экрана: они сохраняют больше контекста страницы, чем модальное окно по центру. `DrawerContent` рендерит нативный ``, открытый через `showModal()`, поэтому браузер помещает его в верхний слой (top layer), делает остальную страницу инертной и рисует подложку. В семействе оверлеев это боковая панель; обычно она подходит для второстепенного редактирования, фильтров и контекстных сценариев в рабочем пространстве. `DrawerClose` превращает вашу собственную кнопку в кнопку закрытия; заголовки и раскладку вы собираете сами из обычной разметки. ## Импорт ```tsx import { Drawer, DrawerTrigger, DrawerContent, DrawerClose, type DrawerProps, } from '@vega-ui/react'; ``` ## Экспортируемые типы - `DrawerProps` - `DrawerTriggerProps` - `DrawerContentProps` - `DrawerCloseProps` ## Минимальная композиция ```tsx import { useId, type CSSProperties } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function MinimalComposition() { const titleId = useId(); return (
Keyboard shortcuts
Press ⌘K to search, C to create a task and ? to open this panel again. ); } ``` ## Обязательные части - `Drawer`: корневое состояние и провайдер контекста - `DrawerTrigger`: действие открытия - `DrawerContent`: модальная панель, прикреплённая к краю ## Необязательные части - `DrawerClose`: закрывает панель по клику; оборачивает вашу собственную кнопку через `asChild` ## Ваша собственная разметка - заголовок, чей `id` передаётся в `DrawerContent` как `aria-labelledby` (или `aria-label` на `DrawerContent`); у панели обязательно должно быть имя - кнопки действий, которые дают ответ панели (Cancel, Confirm), внутри `
` ## Порядок композиции Типичная композиция: 1. `Drawer` 2. `DrawerTrigger` 3. `DrawerContent` с вашим заголовком, необязательным `DrawerClose`, телом и `` для кнопок действий ## Варианты - Положение — основной вариант панели на уровне исходного кода. - Типичные продуктовые варианты — навигационная панель, панель фильтров и панель деталей. - Затемнённая и прозрачная подложка (`overlay` на `DrawerContent`); панель в любом случае остаётся модальной. ## Миграция с 2.x `DrawerHeader`, `DrawerTitle` и `DrawerCloseButton` удалены: библиотека оставляет только части с поведением, которое нельзя выразить обычной разметкой. `DrawerClose` — замена кнопки закрытия, содержащая только поведение. - `DrawerHeader` → ваш собственный элемент раскладки, например flex-строка - `DrawerTitle` → `Heading` с `id`, на который ссылается `aria-labelledby` на `DrawerContent` - `DrawerCloseButton` → `DrawerClose asChild` вокруг вашей собственной кнопки, например `IconButton` с `aria-label` - `useDrawerContext()` больше не возвращает `contentId` и `titleId`, а `DrawerTrigger` больше не устанавливает `aria-controls` ## Пограничные случаи - Проверьте раскладку и анимацию для каждого положения. - Узкие вьюпорты требуют дополнительной проверки на переполнение содержимого. - Используйте панель, только когда сохранить контекст страницы важнее полной модальной изоляции. - Если содержимое превращается в длинный многошаговый сценарий, отдельная страница с маршрутом или выделенный экран могут оказаться понятнее, чем постоянно растущая панель. ## Частые ошибки - Оставлять `DrawerContent` без `aria-labelledby` или `aria-label`. - Использовать панель там, где диалог был бы проще и сфокусированнее. - Позволять содержимому панели превратиться в целую страницу внутри тесной боковой панели. - Позволять кнопкам действий уезжать из поля зрения при длинном содержимом. ## Примеры ### Базовый #### Базовый: инспектор заказа Панель показывает подробности одной записи рядом со страницей. Заголовок даёт ей имя через `aria-labelledby`, круглая кнопка закрытия стоит в верхнем конечном углу; ещё её закрывают клик по подложке, `Escape` и свайп к краю на сенсорном экране. ```tsx import { useId, type CSSProperties } from 'react'; import { Badge, Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; const details = [ { term: 'Customer', value: 'Kestrel Robotics' }, { term: 'Placed', value: 'Nov 2, 2026, 14:08' }, { term: 'Items', value: '3 × Sensor kit, 1 × Charging dock' }, { term: 'Total', value: '$1,284.00' }, { term: 'Ship to', value: '41 Harbour Road, Bristol BS1 5TY' }, ]; export default function SideInspector() { const titleId = useId(); return (
Order #10482
Awaiting payment
{details.map((detail) => (
{detail.term}
{detail.value}
))}
); } ``` ### Контролируемый/с состоянием #### Контролируемый/с состоянием: одна панель для списка с переходом вперёд и назад Родитель владеет `open` и выбранным обращением, поэтому любая строка открывает одну и ту же панель, а стрелки внутри листают список, не закрывая её. `aria-current` отмечает показанную строку. ```tsx import { useId, useState, type CSSProperties } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, Heading, Icon, IconButton, Text, } from '@vega-ui/react'; import { ChevronDownIcon, ChevronUpIcon, XIcon } from '@vega-ui/icons'; const tickets = [ { id: 'SUP-311', title: 'Export to CSV times out', requester: 'Maria Chen', priority: 'High' }, { id: 'SUP-312', title: 'Invoice shows the wrong VAT number', requester: 'Tom Okafor', priority: 'Medium' }, { id: 'SUP-313', title: 'Cannot invite members with a + in the email', requester: 'Lea Novak', priority: 'High' }, { id: 'SUP-314', title: 'Dark mode resets after sign in', requester: 'Sam Rivera', priority: 'Low' }, ]; export default function ControlledOpenState() { const titleId = useId(); const [open, setOpen] = useState(false); const [index, setIndex] = useState(0); const ticket = tickets[index]; const openTicket = (next: number) => { setIndex(next); setOpen(true); }; return (
{tickets.map((item, itemIndex) => ( ))}
{ticket.id} · {index + 1} of {tickets.length} {ticket.title}
Requested by {ticket.requester} · {ticket.priority} priority
setIndex(index - 1)}> setIndex(index + 1)}>
); } ``` ### Форма/интеграция #### Форма/интеграция: форма приглашения с нативной валидацией `` с `type="email" multiple required`: браузер проверяет адреса, а валидная отправка читает их через `FormData` в `onSubmit` и закрывает панель. Под триггером страница показывает отправленные приглашения. ```tsx import { useId, useState, type CSSProperties, type FormEvent } from 'react'; import { Button, Drawer, DrawerClose, DrawerContent, DrawerTrigger, Heading, HelperText, Icon, IconButton, Label, Text, TextArea, TextField, TextFieldInput, } from '@vega-ui/react'; import { XIcon } from '@vega-ui/icons'; export default function ShortFormFlow() { const titleId = useId(); const emailsId = useId(); const emailsHintId = useId(); const messageId = useId(); const [invited, setInvited] = useState([]); const onSubmit = (event: FormEvent) => { const data = new FormData(event.currentTarget); const emails = String(data.get('emails')).split(',').map((email) => email.trim()); setInvited([...invited, ...emails]); }; return (
Invite members
Separate several addresses with commas.