Drawer

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

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

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

import { Drawer, Button } from 'antd';
import { useState } from 'react';

Базовая структура Drawer включает три ключевых момента:

  1. Состояние видимости – управляется с помощью useState.
  2. Методы открытия и закрытия – openDrawer и closeDrawer.
  3. Содержимое панели – передаётся в JSX внутри <Drawer>.

Пример базового использования:

const App = () => {
  const [visible, setVisible] = useState(false);

  const showDrawer = () => setVisible(true);
  const onCl ose = () => setVisible(false);

  return (
    <>
      <Button type="primary" onCl ick={showDrawer}>
        Открыть панель
      </Button>
      <Drawer
        title="Пример панели"
        placement="right"
        onCl ose={onClose}
        open={visible}
      >
        <p>Содержимое панели</p>
        <p>Дополнительные элементы</p>
      </Drawer>
    </>
  );
};

Основные свойства Drawer

1. title – задаёт заголовок панели. Может быть строкой или JSX.

2. placement – определяет сторону, с которой выезжает панель:

  • "left" – слева
  • "right" – справа
  • "top" – сверху
  • "bottom" – снизу

3. onClose – функция, вызываемая при закрытии панели.

4. open (ранее visible) – управляет состоянием отображения Drawer.

5. width и height – задают размеры панели, ширину для боковых и высоту для верхней/нижней панелей.

6. closable – позволяет скрыть крестик закрытия (по умолчанию true).

7. destroyOnClose – если true, содержимое будет удаляться из DOM при закрытии, что полезно для форм с большим количеством данных.

Работа с контентом

Drawer поддерживает любой JSX-контент, включая формы, списки и таблицы. Пример с формой:

import { Form, Input, Button } from 'antd';

<Drawer
  title="Форма пользователя"
  placement="right"
  onCl ose={onClose}
  open={visible}
  destroyOnClose
>
  <Form layout="vertical">
    <Form.Item label="Имя">
      <Input placeholder="Введите имя" />
    </Form.Item>
    <Form.Item label="Email">
      <Input placeholder="Введите email" />
    </Form.Item>
    <Button type="primary" htmlType="submit">
      Сохранить
    </Button>
  </Form>
</Drawer>

Управление несколькими панелями

Можно одновременно использовать несколько Drawer с разными состояниями:

const [firstVisible, setFirstVisible] = useState(false);
const [secondVisible, setSecondVisible] = useState(false);

<Drawer
  title="Первая панель"
  placement="left"
  onCl ose={() => setFirstVisible(false)}
  open={firstVisible}
>
  Контент первой панели
</Drawer>

<Drawer
  title="Вторая панель"
  placement="right"
  onCl ose={() => setSecondVisible(false)}
  open={secondVisible}
>
  Контент второй панели
</Drawer>

Настройка анимации и маски

  • mask – определяет, есть ли затемнённый фон (по умолчанию true).
  • maskClosable – если true, клик по маске закрывает панель.
  • keyboard – возможность закрытия панели клавишей Esc (по умолчанию true).
  • drawerStyle – кастомизация стилей панели.

Пример кастомного стиля:

<Drawer
  title="Стилизация"
  placement="right"
  onCl ose={onClose}
  open={visible}
  drawerStyle={{ backgroundColor: '#f0f2f5', padding: '24px' }}
>
  Контент с кастомными стилями
</Drawer>

Использование вложенных Drawer

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

<Drawer
  title="Внешняя панель"
  placement="right"
  onCl ose={() => setOuter(false)}
  open={outer}
>
  <Button onCl ick={() => setInner(true)}>Открыть внутреннюю</Button>
  <Drawer
    title="Внутренняя панель"
    placement="right"
    onCl ose={() => setInner(false)}
    open={inner}
  >
    Содержимое внутренней панели
  </Drawer>
</Drawer>

Полезные советы

  • Для форм и динамического контента рекомендуется использовать destroyOnClose, чтобы избегать утечек состояния.
  • При множественных Drawer следует внимательно управлять состояниями видимости, чтобы панели не конфликтовали.
  • Кастомные стили лучше задавать через drawerStyle вместо глобального CSS, чтобы не нарушать тему Ant Design.
  • Использование maskClosable={false} повышает точность взаимодействия с панелью, особенно при сложных формах или таблицах.

Drawer является мощным инструментом для организации дополнительного контента, позволяя создавать интерфейсы с множеством выезжающих панелей и интерактивных элементов, оставаясь при этом полностью интегрированным с системой стилей Ant Design.

Оглавление