Компонент Popover из библиотеки компонентов WordPress позволяет отображать содержимое во всплывающем модальном окне, плавающем рядом с заданным элементом (якорем). Если якорь не указан, Popover автоматически прикрепляется к родительскому элементу. Ниже мы рассмотрим, как использовать и настраивать этот компонент, а также подробно разберем все параметры.
Простой пример
В этом примере Popover появляется при нажатии на кнопку и скрывается при повторном нажатии.
import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
const MyPopover = () => {
const [ isVisible, setIsVisible ] = useState(false);
const toggleVisible = () => {
setIsVisible((state) => !state);
};
return (
<Button variant="secondary" onClick={toggleVisible}>
Показать Popover
{isVisible && <Popover>Содержимое Popover</Popover>}
</Button>
);
};
В этом примере Popover отображается рядом с кнопкой и закрывается, если компонент не возвращает Popover в процессе рендера.
Пример с явным указанием якоря
Для привязки Popover к определенному элементу можно использовать проп anchor, который должен быть сохранен в состоянии (state) для обеспечения обновления компонента при изменениях якоря.
import { useState } from 'react';
import { Button, Popover } from '@wordpress/components';
const MyPopover = () => {
const [ popoverAnchor, setPopoverAnchor ] = useState();
const [ isVisible, setIsVisible ] = useState(false);
const toggleVisible = () => {
setIsVisible((state) => !state);
};
return (
<div>
<p ref={setPopoverAnchor}>Якорь для Popover</p>
<Button variant="secondary" onClick={toggleVisible}>
Показать Popover
</Button>
{isVisible && (
<Popover anchor={popoverAnchor}>
Привязанный Popover
</Popover>
)}
</div>
);
};
Рендеринг Popover на определенной позиции в дереве DOM
По умолчанию Popover рендерится в конце body документа. Чтобы отрендерить Popover в конкретной части страницы, используйте Popover.Slot выше в дереве элементов:
import { createRoot } from 'react-dom/client';
import { Popover } from '@wordpress/components';
import Content from './Content';
const app = document.getElementById('app');
const root = createRoot(app);
root.render(
<div>
<Content />
<Popover.Slot />
</div>
);
Параметры компонента Popover
Рассмотрим параметры Popover, каждый из которых влияет на поведение и внешний вид компонента.
- anchor:
Element | VirtualElement | null
Элемент, используемый как якорь для привязкиPopover. Может быть элементом DOM или объектомVirtualElement, который имеет методыgetBoundingClientRect()иownerDocument. Этот элемент должен быть сохранен в состоянии.
Обязательный: Нет. - anchorRect:
DomRectWithOwnerDocument
Устаревший. Используйте параметрanchorвместо него. Представляет собой объектDOMRect, который задает фиксированную позициюPopover.
Обязательный: Нет. - anchorRef:
Element | PopoverAnchorRefReference | PopoverAnchorRefTopBottom | Range
Устаревший. Используйте параметрanchor. Задает фиксированную позицию дляPopoverс помощью элемента, ссылки React или диапазона.
Обязательный: Нет. - animate:
boolean
Определяет, будет лиPopoverанимироваться при открытии.
Обязательный: Нет
По умолчанию:true. - children:
ReactNode
Дочерние элементы, отображаемые как содержимоеPopover.
Обязательный: Да. - expandOnMobile:
boolean
ОтображениеPopoverна весь экран на мобильных устройствах.
Обязательный: Нет. - flip:
boolean
Определяет, следует лиPopoverменять сторону привязки, если на текущей стороне недостаточно места. Например,topменяется наbottom.
Обязательный: Нет
По умолчанию:true. - focusOnMount:
'firstElement' | boolean
Задает, какой элемент должен получить фокус при монтированииPopover.firstElementнаходит первый элемент, доступный для табуляции,true— фокусирует контейнер,false— отключает фокусировку.
Обязательный: Нет
По умолчанию:'firstElement'. - onFocusOutside:
(event: SyntheticEvent) => void
Колбэк, вызываемый при уходе фокуса сPopover. Используется для сложных сценариев.
Обязательный: Нет. - getAnchorRect:
(fallbackReferenceElement: Element | null) => DomRectWithOwnerDocument
Устаревший. Используйте параметрanchor. Функция, возвращающая позициюPopover.
Обязательный: Нет. - headerTitle:
string
Текст заголовка при отображенииPopoverна весь экран на мобильных устройствах.
Обязательный: Нет. - isAlternate:
boolean
Устаревший. Вместо этого используйтеvariantс значением'toolbar'.
Обязательный: Нет. - noArrow:
boolean
Определяет, отображать ли стрелку, указывающую на якорьPopover.
Обязательный: Нет
По умолчанию:true. - offset:
number
Расстояние (в пикселях) между якорем иPopover.
Обязательный: Нет. - onClose:
() => void
Колбэк, вызываемый при закрытииPopover.
Обязательный: Нет. - placement:
'top' | 'top-start' | 'top-end' | 'right' | 'right-start' | 'right-end' | 'bottom' | 'bottom-start' | 'bottom-end' | 'left' | 'left-start' | 'left-end' | 'overlay'
ПозицияPopoverотносительно якоря. ЗначениеoverlayнакладываетPopoverна элемент.
Обязательный: Нет
По умолчанию:'bottom-start'. - position:
[yAxis] [xAxis] [optionalCorner]
Устаревший. Используйте параметрplacement.
Обязательный: Нет. - resize:
boolean
Регулирует размерPopover, чтобы предотвратить выход за границы видимой области.
Обязательный: Нет
По умолчанию:true. - variant:
'toolbar' | 'unstyled'
СтильPopover. Значения:unstyled: без фона, границы, тени.toolbar: стиль без возвышения, контрастный.
Обязательный: Нет.
Заключение
Компонент Popover гибок в использовании и позволяет легко создавать адаптивные интерфейсы в WordPress.