Drawer

Компонент Drawer в Chakra UI представляет собой панель, которая выдвигается из края экрана, позволяя отображать дополнительный контент без перехода на другую страницу. Drawer часто используется для навигационных меню, форм, фильтров и других интерактивных элементов, которые должны оставаться доступными, не нарушая основного интерфейса.

Импорт и базовая структура

Для использования Drawer необходимо импортировать его вместе с несколькими вспомогательными компонентами:

import {
  Drawer,
  DrawerBody,
  DrawerHeader,
  DrawerOverlay,
  DrawerContent,
  DrawerCloseButton,
  useDisclosure,
  Button
} from "@chakra-ui/react";

useDisclosure — хук для управления состоянием открытия и закрытия Drawer (isOpen, onOpen, onClose).

Простейший пример Drawer:

function ExampleDrawer() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть Drawer</Button>
      <Drawer isOpen={isOpen} placement="right" onCl ose={onClose}>
        <DrawerOverlay />
        <DrawerContent>
          <DrawerCloseButton />
          <DrawerHeader>Заголовок Drawer</DrawerHeader>
          <DrawerBody>
            Здесь размещается основной контент Drawer.
          </DrawerBody>
        </DrawerContent>
      </Drawer>
    </>
  );
}
  • placement задаёт позицию Drawer: right, left, top, bottom.
  • DrawerOverlay затемняет основной контент при открытии панели.
  • DrawerCloseButton добавляет кнопку закрытия в верхний угол.

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

Drawer поддерживает различные размеры через проп size:

<Drawer size="sm" ... /> // маленький
<Drawer size="md" ... /> // средний
<Drawer size="lg" ... /> // большой
<Drawer size="xl" ... /> // экстравеликий

Для адаптивного дизайна можно комбинировать размеры с медиазапросами через Chakra UI useBreakpointValue:

import { useBreakpointValue } from "@chakra-ui/react";

const drawerSize = useBreakpointValue({ base: "full", md: "md" });

<Drawer size={drawerSize} ... />

Работа с формами и интерактивным контентом

Drawer часто используется для форм и сложного интерактивного контента, потому что он поддерживает фокусировку и управление клавиатурой:

<DrawerBody>
  <form>
    <input placeholder="Имя" />
    <input placeholder="Email" />
    <Button type="submit">Отправить</Button>
  </form>
</DrawerBody>

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

Настройка анимации и поведения

  • isFullHeight (для вертикальных Drawer) позволяет растянуть панель на всю высоту экрана.

  • motionPreset управляет анимацией открытия:

    • slideInBottom — сдвиг снизу
    • slideInRight — сдвиг справа
    • scale — масштабирование

Пример кастомной анимации:

<Drawer
  isOpen={isOpen}
  placement="bottom"
  onCl ose={onClose}
  motionPreset="slideInBottom"
>
  • closeOnOverlayClick (по умолчанию true) закрывает Drawer при клике на оверлей.
  • closeOnEsc управляет возможностью закрытия клавишей Escape.

Управление фокусом и доступность

Chakra UI обеспечивает доступность Drawer с минимальными настройками:

  • initialFocusRef позволяет задать элемент, который будет сфокусирован при открытии.
  • finalFocusRef возвращает фокус на выбранный элемент после закрытия Drawer.

Пример:

const btnRef = React.useRef();
<Drawer
  isOpen={isOpen}
  placement="right"
  onCl ose={onClose}
  finalFocusRef={btnRef}
>
  <DrawerContent>
    <DrawerCloseButton />
    <DrawerHeader>Заголовок</DrawerHeader>
    <DrawerBody>
      <input ref={initialRef} placeholder="Фокус при открытии" />
    </DrawerBody>
  </DrawerContent>
</Drawer>
<Button ref={btnRef} onCl ick={onOpen}>Открыть Drawer</Button>

Комбинация с другими компонентами Chakra UI

Drawer хорошо интегрируется с компонентами Chakra UI: Tabs, Accordion, Menu, FormControl. Это позволяет создавать сложные интерфейсы с фильтрами, панелями управления или даже мини-приложениями внутри выдвижной панели.

Практические рекомендации

  • Для небольших уведомлений или всплывающих подсказок лучше использовать Modal или Popover. Drawer оптимален для навигации и форм.
  • Всегда задавать onClose, чтобы управление состоянием было предсказуемым.
  • Стараться не перегружать Drawer слишком большим количеством контента, чтобы сохранить удобство взаимодействия и производительность.

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

Оглавление