DropdownMenu — это компонент в WordPress, который отображает компактный список действий. Он работает как меню, появляющееся в Popover (всплывающем контейнере), когда пользователь взаимодействует с кнопкой или значком. Это полезный инструмент для отображения опций, доступных в конкретном контексте, без постоянного показа всех элементов интерфейса.
Базовое использование
Чтобы начать работу с DropdownMenu, импортируйте его из библиотеки компонентов WordPress:
import { DropdownMenu } from '@wordpress/components';
import { more, arrowLeft, arrowRight, arrowUp, arrowDown } from '@wordpress/icons';
Пример использования DropdownMenu
В этом примере мы создаем меню, которое позволяет пользователю выбрать направление из списка опций: Вверх, Вправо, Вниз и Влево. При выборе каждой опции выводится соответствующее сообщение в консоль.
const MyDropdownMenu = () => (
<DropdownMenu
icon={more}
label="Выберите направление"
controls={[
{
title: 'Вверх',
icon: arrowUp,
onClick: () => console.log('Вверх выбрано'),
},
{
title: 'Вправо',
icon: arrowRight,
onClick: () => console.log('Вправо выбрано'),
},
{
title: 'Вниз',
icon: arrowDown,
onClick: () => console.log('Вниз выбрано'),
},
{
title: 'Влево',
icon: arrowLeft,
onClick: () => console.log('Влево выбрано'),
},
]}
/>
);
Основные элементы и параметры DropdownMenu
icon(опциональный)- Тип:
string | null - Иконка, отображаемая в кнопке для открытия меню. Обычно используется для обозначения, что кнопка открывает выпадающий список.
- Значение по умолчанию:
"menu"
- Тип:
Пример с измененной иконкой:
<DropdownMenu icon={more} label="Выбрать действие" />
label(обязательный)- Тип:
string - Текст, предназначенный для улучшения доступности, отображаемый при фокусе на кнопке открытия меню.
- Тип:
Пример использования label:
<DropdownMenu label="Действия" icon={more} />
controls(опциональный)- Тип:
DropdownOption[] | DropdownOption[][] - Массив объектов, описывающих опции меню. Каждый объект должен включать свойства:
title(обязательно): текстовое название действия.icon(опционально): иконка, связанная с опцией.isDisabled(опционально): флаг отключения опции.onClick(обязательно): функция, вызываемая при выборе опции.
- Тип:
Пример controls:
<DropdownMenu
label="Настройки"
icon={more}
controls={[
{
title: 'Открыть',
icon: arrowUp,
onClick: () => console.log('Открыто'),
},
{
title: 'Закрыть',
icon: arrowDown,
onClick: () => console.log('Закрыто'),
isDisabled: true,
},
]}
/>
children(опциональный)- Тип:
(callbackProps: DropdownCallbackProps) => ReactNode - Функция, возвращающая компоненты
MenuItem,MenuItemsChoiceилиMenuGroup, используемые внутриDropdownMenu.
- Тип:
Пример с использованием children:
import { DropdownMenu, MenuGroup, MenuItem } from '@wordpress/components';
import { more, arrowUp, arrowDown, trash } from '@wordpress/icons';
const MyDropdownMenu = () => (
<DropdownMenu icon={more} label="Выберите действие">
{({ onClose }) => (
<>
<MenuGroup>
<MenuItem icon={arrowUp} onClick={() => console.log('Вверх')}>
Переместить вверх
</MenuItem>
<MenuItem icon={arrowDown} onClick={() => console.log('Вниз')}>
Переместить вниз
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItem icon={trash} onClick={() => console.log('Удалить')}>
Удалить
</MenuItem>
</MenuGroup>
</>
)}
</DropdownMenu>
);
className(опциональный)- Тип:
string - CSS-класс, применяемый к обертке элемента управления.
- Тип:
Пример использования className:
<DropdownMenu className="custom-dropdown-menu" icon={more} label="Меню" />
popoverProps(опциональный)- Тип:
DropdownProps['popoverProps'] - Объект
popoverPropsдля передачи дополнительных параметров компонентуPopover.
- Тип:
Пример с popoverProps:
<DropdownMenu
icon={more}
label="Выбрать действие"
popoverProps={{ position: 'bottom center' }}
/>
toggleProps(опциональный)- Тип:
ToggleProps - Объект
toggleProps, который передает дополнительные параметры вложенному компонентуButtonвнутриDropdown.
- Тип:
Пример с toggleProps:
<DropdownMenu
icon={more}
label="Меню"
toggleProps={{ tooltip: 'Нажмите для действий' }}
/>
menuProps(опциональный)- Тип:
NavigableContainerProps - Объект
menuProps, который передает дополнительные параметры вложенному компонентуNavigableMenu.
- Тип:
Пример с menuProps:
<DropdownMenu
icon={more}
label="Настройки"
menuProps={{ orientation: 'vertical' }}
/>
disableOpenOnArrowDown(опциональный)- Тип:
boolean - Позволяет отключить открытие меню при нажатии клавиши вниз.
- Значение по умолчанию:
false
- Тип:
Пример использования disableOpenOnArrowDown:
<DropdownMenu
icon={more}
label="Выберите действие"
disableOpenOnArrowDown={true}
/>
defaultOpen(опциональный)- Тип:
boolean - Начальное состояние меню при рендере.
- Значение по умолчанию:
false
- Тип:
Пример с defaultOpen:
<DropdownMenu
icon={more}
label="Меню"
defaultOpen={true}
/>
openиonToggle(опциональные)open: управляемое состояние меню (тип:boolean).onToggle: функция, вызываемая при изменении состояния меню (тип:(willOpen: boolean) => void).
Пример с использованием open и onToggle:
const ControlledDropdown = () => {
const [isOpen, setIsOpen] = useState(false);
return (
<DropdownMenu
icon={more}
label="Контролируемое меню"
open={isOpen}
onToggle={(willOpen) => setIsOpen(willOpen)}
/>
);
};
Дополнительные примеры с MenuGroup и MenuItemsChoice
Комбинируя компоненты MenuGroup и MenuItemsChoice, можно создать сложное меню с дополнительными параметрами выбора.
<DropdownMenu icon={more} label="Выберите действие">
{({ onClose }) => (
<>
<MenuGroup>
<MenuItem icon={arrowUp} onClick={() => console.log('Переместить вверх')}>
Вверх
</MenuItem>
<MenuItem icon={arrowDown} onClick={() => console.log('Переместить вниз')}>
Вниз
</MenuItem>
</MenuGroup>
<MenuGroup>
<MenuItemsChoice
choices={[
{ value: 'editor', label: 'Редактор' },
{ value: 'viewer', label: 'Просмотр' },
]}
onSelect={(value) => console.log('Выбрано:', value)}
value="editor"
/>
</MenuGroup>
</>
)}
</DropdownMenu>
Заключение
Компонент DropdownMenu позволяет легко создавать компактные и удобные для пользователя меню, появляющиеся при взаимодействии. Использование различных параметров и вложенных компонентов, таких как MenuGroup и MenuItemsChoice, позволяет гибко адаптировать меню для любой ситуации в интерфейсе WordPress.