Dropdown

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

Основной принцип работы Dropdown заключается в сочетании триггера (элемента, на который пользователь кликает или наводит курсор) и меню (списка действий или опций, которые отображаются при активации).

import { Menu, Dropdown, Button } from 'antd';
import { DownOutlined } from '@ant-design/icons';

const menu = (
  <Menu>
    <Menu.Item key="1">Первый пункт</Menu.Item>
    <Menu.Item key="2">Второй пункт</Menu.Item>
    <Menu.Item key="3">Третий пункт</Menu.Item>
  </Menu>
);

<Dropdown overlay={menu}>
  <Button>
    Действия <DownOutlined />
  </Button>
</Dropdown>
  • overlay — свойство, указывающее содержимое выпадающего меню. Обычно это компонент Menu.
  • trigger — массив, задающий, по каким событиям раскрывается меню (['click'], ['hover']).
  • placement — позиция меню относительно триггера (bottomLeft, bottomRight, topLeft, topRight).

Настройка триггера и поведения Dropdown

Dropdown может открываться при различных действиях пользователя. По умолчанию используется клик, но можно настроить и другие варианты:

<Dropdown overlay={menu} trigger={['hover']}>
  <Button>Наведи на меня</Button>
</Dropdown>

Ключевые моменты:

  • click — меню открывается по клику.
  • hover — меню открывается при наведении.
  • contextMenu — открытие по правому клику.

Комбинация нескольких триггеров позволяет создавать более гибкие интерфейсы.

Позиционирование меню

Свойство placement определяет расположение выпадающего меню относительно триггера:

<Dropdown overlay={menu} placement="bottomRight">
  <Button>Меню справа</Button>
</Dropdown>

Возможные значения:

  • bottomLeft — стандартное расположение под триггером слева.
  • bottomRight — под триггером справа.
  • topLeft — над триггером слева.
  • topRight — над триггером справа.

Управляемый Dropdown

Dropdown можно сделать управляемым с использованием состояния компонента. Это позволяет контролировать открытие и закрытие меню программно.

import { useState } from 'react';

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

  const handleVisibleChange = (flag) => {
    setVisible(flag);
  };

  return (
    <Dropdown
      overlay={menu}
      onVisibleCha nge={handleVisibleChange}
      visible={visible}
    >
      <Button>Управляемое меню</Button>
    </Dropdown>
  );
};

Параметры управляемого Dropdown:

  • visible — состояние видимости меню.
  • onVisibleChange — функция, вызываемая при изменении состояния меню.

Стилизация и кастомизация

Dropdown поддерживает различные стили и кастомные компоненты внутри меню. Например, можно использовать Menu.Divider для разделения пунктов:

const menu = (
  <Menu>
    <Menu.Item key="1">Опция 1</Menu.Item>
    <Menu.Divider />
    <Menu.Item key="2">Опция 2</Menu.Item>
  </Menu>
);

Для добавления иконок используется компонент Icon из Ant Design:

<Menu.Item key="3" icon={<DownOutlined />}>
  С пунктом иконки
</Menu.Item>

Dropdown не ограничен компонентом Menu. Можно передавать любой React-элемент через overlay:

<Dropdown
  overlay={
    <div style={{ padding: 16, background: '#fff', border: '1px solid #ccc' }}>
      <p>Произвольный контент</p>
      <Button type="primary">Действие</Button>
    </div>
  }
>
  <Button>Кастомный Dropdown</Button>
</Dropdown>

Это особенно полезно для создания форм, уведомлений или сложных интерактивных меню.

Анимация и переходы

Ant Design использует библиотеку rc-motion для плавного появления Dropdown. По умолчанию применяется эффект fade с небольшим смещением:

<Dropdown overlay={menu} transitionName="slide-up">
  <Button>Анимированный Dropdown</Button>
</Dropdown>

Совет: можно настроить кастомные анимации через CSS, изменяя классы .ant-dropdown-slide-up-enter и .ant-dropdown-slide-up-leave.

Использование Dropdown.Button

Компонент Dropdown.Button объединяет кнопку и выпадающее меню в один элемент, где основная кнопка выполняет действие, а стрелка раскрывает меню:

<Dropdown.Button overlay={menu} onCl ick={() => console.log('Главная кнопка')}>
  Действие
</Dropdown.Button>

Преимущества:

  • Упрощает UX, когда необходимо объединить действие и дополнительные опции.
  • Позволяет контролировать событие основной кнопки отдельно от меню.

Работа с событиями

Dropdown поддерживает несколько ключевых событий:

  • onVisibleChange(visible) — вызывается при открытии/закрытии меню.
  • onClick внутри Menu — обработка клика по пункту меню.
  • onOpenChange — аналог onVisibleChange в новых версиях, обеспечивает контроль над состоянием.

Пример обработки выбора пункта:

const handleMenuClick = (e) => {
  console.log('Выбран пункт:', e.key);
};

const menu = (
  <Menu onCl ick={handleMenuClick}>
    <Menu.Item key="1">Пункт 1</Menu.Item>
    <Menu.Item key="2">Пункт 2</Menu.Item>
  </Menu>
);

Практические советы

  • Для больших меню использовать компонент Menu с вложенными SubMenu.
  • Для кастомного контента всегда оборачивать элементы в контейнер с фоном и паддингами.
  • Управляемый Dropdown рекомендуется использовать, если требуется программное открытие/закрытие или интеграция с состоянием приложения.
  • Комбинирование trigger и placement позволяет создавать контекстные меню, похожие на нативные в десктопных приложениях.

Dropdown в Ant Design — мощный инструмент для организации контекстного взаимодействия, который сочетает простоту использования с гибкой кастомизацией, поддержкой событий и анимаций, что делает его универсальным компонентом для любого интерфейса на JavaScript.

Оглавление