Компонент Dropdown в WordPress предназначен для отображения кнопки, которая открывает модальное окно с содержимым при нажатии. Компонент автоматически управляет состоянием раскрытия/сокрытия меню, закрывает меню при клике за его пределами и использует render props для отображения кнопки и содержимого.
Использование
Пример базового использования компонента Dropdown:
import { Button, Dropdown } from '@wordpress/components';
const MyDropdown = () => (
<Dropdown
className="my-container-class-name"
contentClassName="my-popover-content-classname"
popoverProps={{ placement: 'bottom-start' }}
renderToggle={({ isOpen, onToggle }) => (
<Button
variant="primary"
onClick={onToggle}
aria-expanded={isOpen}
>
Toggle Popover!
</Button>
)}
renderContent={() => <div>This is the content of the popover.</div>}
/>
);
Описание Props
Компонент Dropdown поддерживает следующие свойства (props), которые позволяют гибко управлять его отображением и поведением. Если свойства не указаны, применяются значения по умолчанию.
1. className: string
- Класс CSS, который применяется к глобальному контейнеру компонента
Dropdown. - Обязательный: Нет
- Пример:
"my-dropdown-class"
2. contentClassName: string
- CSS-класс для стилизации выпадающего меню. Этот класс полезен для точного нацеливания на стилизация, так как меню не является дочерним элементом узла контейнера.
- Обязательный: Нет
- Пример:
"my-dropdown-content"
3. defaultOpen: boolean
- Начальное состояние компонента: открыт или закрыт. Полезно для контролируемого рендеринга. Это свойство будет переопределено, если указано свойство
open. - Обязательный: Нет
- Пример:
true(по умолчанию закрыт)
4. expandOnMobile: boolean
- Позволяет отображать модальное окно на весь экран на мобильных устройствах. Полезно для улучшения UX на устройствах с небольшим экраном.
- Обязательный: Нет
- По умолчанию:
false
5. focusOnMount: 'firstElement' | boolean
- Определяет, какой элемент получает фокус при монтировании раскрывающегося меню.
firstElement(по умолчанию) — фокусируется на первом элементе меню.true— фокусируется на контейнере меню.false— отключает автоматическое наведение фокуса (используйте только при наличии альтернативного метода обеспечения доступности).- Обязательный: Нет
- По умолчанию:
"firstElement"
6. headerTitle: string
- Текст в заголовке выпадающего меню в полноэкранном режиме на мобильных устройствах.
- Обязательный: Нет
- Пример:
"Настройки меню"
7. onClose: () => void
- Функция, вызываемая при закрытии модального окна. Полезно для дополнительных действий при закрытии, например, сброса состояния или логирования.
- Обязательный: Нет
const onCloseHandler = () => {
console.log("Dropdown closed");
};
8. open: boolean
- Контролируемое состояние раскрытия компонента. Используйте вместе с
onToggleдля полного контроля над состоянием. - Обязательный: Нет
- Пример:
trueилиfalse
9. onToggle: (willOpen: boolean) => void
- Функция, вызываемая при изменении состояния компонента с закрытого на открытое и наоборот.
- Обязательный: Нет
const toggleHandler = (willOpen) => {
console.log("Dropdown state changed:", willOpen);
};
10. popoverProps: PopoverProps
- Свойства, передаваемые компоненту
Popover, чтобы предоставить дополнительные возможности, такие как управление позицией и отображение стрелки. - Обязательный: Нет
popoverProps={{ placement: 'top-start', hasArrow: false }}
11. renderContent: (props: CallbackProps) => ReactNode
- Функция для рендеринга содержимого раскрывающегося меню.
- Обязательный: Да
renderContent={() => <div>Мое содержимое меню</div>}
12. renderToggle: (props: CallbackProps) => ReactNode
- Функция для рендеринга кнопки, переключающей состояние выпадающего меню.
- Обязательный: Да
renderToggle={({ isOpen, onToggle }) => (
<Button onClick={onToggle} aria-expanded={isOpen}>Открыть меню</Button>
)}13. style: React.CSSProperties
- CSS-стили для глобального контейнера компонента
Dropdown. - Обязательный: Нет
style={{ border: '1px solid black', padding: '10px' }}Пример использования с дополнительными параметрами
import { Button, Dropdown } from '@wordpress/components';
const AdvancedDropdown = () => (
<Dropdown
className="custom-dropdown"
contentClassName="custom-dropdown-content"
defaultOpen={false}
expandOnMobile={true}
focusOnMount="firstElement"
headerTitle="Настройки меню"
onClose={() => console.log("Dropdown закрыт")}
open={undefined}
onToggle={(willOpen) => console.log("Dropdown состояние изменено:", willOpen)}
popoverProps={{ placement: 'bottom-end', hasArrow: true }}
renderContent={() => (
<div>
<p>Элементы меню:</p>
<ul>
<li>Опция 1</li>
<li>Опция 2</li>
<li>Опция 3</li>
</ul>
</div>
)}
renderToggle={({ isOpen, onToggle }) => (
<Button
variant="secondary"
onClick={onToggle}
aria-expanded={isOpen}
>
Показать меню
</Button>
)}
style={{ width: '200px', backgroundColor: '#f9f9f9' }}
/>
);
В этом примере:
- Мы задали расширенное отображение на мобильных устройствах с
expandOnMobile. - Определили
headerTitle, который будет отображаться в полноэкранном режиме на мобильных устройствах. - Применили стиль контейнера
style, а также дополнительные CSS-классы для контейнера и содержимого.
Заключение
Компонент Dropdown в WordPress обеспечивает удобный способ создания модальных окон с возможностью кастомизации. Этот компонент идеален для создания выпадающих меню, позволяя настроить стиль, поведение, параметры отображения и содержание.