Drawer

Паттерны

Боковой инспектор

Когда использовать:

• Пользователю нужны контекстные детали без ухода со страницы.

Заметки по композиции:

• Содержимое должно относиться к текущему выбору.
• Дайте панели имя через заголовок, на который ссылается aria-labelledby, чтобы назначение инспектора оставалось очевидным.

Компромиссы:

• Сохраняет контекст.
• Хуже подходит для строго модальных решений.

import { useId, type CSSProperties } from 'react';
import {
  Badge,
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  Icon,
  IconButton,
  Text,

Короткая форма

Когда использовать:

• Небольшой сценарий редактирования или приглашения должен оставаться привязанным к странице.

Заметки по композиции:

• Держите действия доступными внизу.
• Не позволяйте короткой форме незаметно разрастись в полностраничный сценарий.

Компромиссы:

• Прерывает работу меньше, чем диалог.
• Её проще перегрузить содержимым.

import { useId, useState, type CSSProperties, type FormEvent } from 'react';
import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  HelperText,
  Icon,
  IconButton,
  Label,

Панель активности

Когда использовать:

• Содержимое длинное и второстепенное.

Заметки по композиции:

• Используйте внутреннюю прокрутку.
• Заголовок и действия должны оставаться на месте, пока прокручивается тело.

Компромиссы:

• Хорошо подходит для логов и таймлайнов.
• Требует тщательной проверки на разных вьюпортах.

import { useId, type CSSProperties } from 'react';
import {
  Button,
  Drawer,
  DrawerClose,
  DrawerContent,
  DrawerTrigger,
  Heading,
  Icon,
  IconButton,
  Text,
} from '@vega-ui/react';

Сравнение

Быстрое правило выбора

Выбирайте Drawer, когда задача должна оставаться тесно связанной с контекстом текущей страницы, но при этом использовать оверлей.

Drawer или Dialog

Используйте Drawer, когда:

• задача ощущается как боковая панель
• пользователю полезно видеть контекст страницы

Используйте Dialog, когда:

• сценарий должен ощущаться более модальным и ограниченным

Drawer или Sheet

Используйте Drawer, когда:

• панель должна ощущаться прикреплённой к краю, а не нижней шторкой
• контекст десктопной или широкой раскладки должен оставаться видимым рядом с панелью

Используйте Sheet, когда:

• UX ориентирован на касания или похож на шторку

Drawer или Popover

Используйте Drawer, когда:

• содержимое слишком объёмное или задача слишком насыщенная для плавающего поповера

Используйте Popover, когда:

• содержимое короткое и контекстное

Выбирайте этот компонент, когда

• задаче подходит боковая панель
• важно сохранить контекст страницы
• содержимое больше, чем для поповера, но менее модальное, чем для диалога
• панель должна восприниматься как часть рабочего пространства, а не как временное меню

Не выбирайте этот компонент, когда

• сценарий — короткое модальное подтверждение
• содержимое маленькое и контекстное
• раскладка превратится в тесную псевдостраницу

Решение проблем

Действия уезжают из поля зрения

Симптом

При длинном содержимом панели пользователю трудно добраться до важных действий.

Вероятная причина

У тела панели нет продуманной стратегии прокрутки.

Как проверить

• Проверьте панель на вьюпортах меньшей высоты.
• Добавьте реалистичное длинное содержимое.

Исправление

• Сделайте внутреннее содержимое прокручиваемым.
• По возможности держите ключевые действия вне прокручиваемого тела.

Вложенные панели ведут себя нестабильно

Симптом

Возврат фокуса или закрытие во вложенных панелях работают непоследовательно.

Вероятная причина

Вложенные панели не тестировались как единый стек оверлеев.

Как проверить

• Откройте родительскую и вложенную панели.
• Закройте их в обратном порядке.

Исправление

• Сохраняйте стандартную структуру частей.
• Повторно протестируйте весь стек оверлеев.

Панель кажется неподходящим паттерном

Симптом

Технически панель работает, но UX кажется слишком громоздким или непрямым.

Вероятная причина

Сценарий на самом деле ближе к модальному диалогу или небольшому поповеру.

Как проверить

• Оцените объём содержимого и критичность задачи.

Исправление

• Переключитесь на Dialog или Popover, если они лучше подходят для задачи.