Popper для позиционирования

Popper — это мощный инструмент для управления позиционированием элементов в интерфейсе, который используется в библиотеке MUI (Material-UI). Он обеспечивает динамическое размещение всплывающих элементов относительно целевых элементов (anchor elements) с поддержкой смещений, автоматического переворота и адаптивного позиционирования при изменении размеров окна или элементов страницы.

Установка и подключение

Для работы с Popper необходимо установить пакет @mui/material, который включает компонент Popper.

import Popper from '@mui/material/Popper';
import Button from '@mui/material/Button';
import { useState } from 'react';

Popper не требует сложной конфигурации, но всегда требует привязки к anchor element, относительно которого будет позиционироваться всплывающее окно.

Основная структура Popper

Компонент Popper принимает следующие ключевые свойства:

  • open — логическое значение, контролирующее видимость Popper.
  • anchorEl — ссылка на DOM-элемент, относительно которого Popper будет позиционироваться.
  • placement — определяет расположение относительно anchor element: top, bottom, left, right и их вариации с -start и -end.
  • modifiers — массив объектов, позволяющий управлять смещением, ограничениями и поведением при переполнении контейнера.
  • transition — позволяет применять анимации при открытии и закрытии Popper.

Простейший пример использования:

function SimplePopper() {
  const [anchorEl, setAnchorEl] = useState(null);

  const handleClick = (event) => {
    setAnchorEl(anchorEl ? null : event.currentTarget);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'simple-popper' : undefined;

  return (
    <div>
      <Button aria-describedby={id} onCl ick={handleClick}>
        Toggle Popper
      </Button>
      <Popper id={id} open={open} anchorEl={anchorEl} placement="bottom">
        <div style={{ padding: '10px', backgroundColor: 'white', border: '1px solid gray' }}>
          Содержимое Popper
        </div>
      </Popper>
    </div>
  );
}

Управление позиционированием через placement

placement определяет базовое расположение Popper относительно anchor element:

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

Варианты с -start и -end позволяют уточнять выравнивание:

  • bottom-start — снизу, выровнено по левому краю
  • top-end — сверху, выровнено по правому краю

Popper автоматически подстраивается под размеры окна, предотвращая выход за границы видимой области.

Использование modifiers

Массив modifiers предоставляет более тонкий контроль над поведением Popper. Наиболее часто используемые модификаторы:

  • offset — задаёт смещение относительно anchor element:
<Popper
  open={open}
  anchorEl={anchorEl}
  placement="bottom"
  modifiers={[{ name: 'offset', options: { offset: [0, 10] } }]}
/>
  • preventOverflow — предотвращает выход Popper за границы контейнера.
  • flip — позволяет Popper автоматически переворачиваться при недостатке места.
  • arrow — добавляет стрелку, указывающую на anchor element.

Пример с модификаторами:

<Popper
  open={open}
  anchorEl={anchorEl}
  placement="top"
  modifiers={[
    { name: 'offset', options: { offset: [0, 20] } },
    { name: 'flip', enabled: true },
    { name: 'preventOverflow', options: { padding: 8 } }
  ]}
>
  <div>Popper с модификаторами</div>
</Popper>

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

Для добавления плавного появления и скрытия используется свойство transition. В MUI часто применяют компонент Grow или Fade из @mui/material.

import Grow from '@mui/material/Grow';

<Popper open={open} anchorEl={anchorEl} placement="bottom" transition>
  {({ TransitionProps }) => (
    <Grow {...TransitionProps}>
      <div style={{ padding: '10px', backgroundColor: 'white', border: '1px solid gray' }}>
        Анимированный Popper
      </div>
    </Grow>
  )}
</Popper>

TransitionProps автоматически передаёт необходимые свойства для синхронизации анимации с состоянием open.

Popper с компонентами MUI

Popper часто комбинируется с такими компонентами, как Menu, Tooltip, ClickAwayListener, что позволяет строить полноценные интерактивные интерфейсы:

  • Menu — для всплывающих меню.
  • Tooltip — для подсказок при наведении.
  • ClickAwayListener — закрытие Popper при клике вне его области.

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

import ClickAwayListener from '@mui/material/ClickAwayListener';

<ClickAwayListener onClickA way={() => setAnchorEl(null)}>
  <Popper open={open} anchorEl={anchorEl}>
    <div>Закрытие при клике вне Popper</div>
  </Popper>
</ClickAwayListener>

Динамическое обновление позиции

Popper отслеживает изменения размеров anchor element и окна браузера. Для ручного обновления позиции можно использовать метод update через popperRef:

const popperRef = useRef();

useEffect(() => {
  if (popperRef.current) {
    popperRef.current.update();
  }
}, [someDependency]);

Это полезно при изменении содержимого Popper или anchor element динамически.

Ключевые рекомендации при использовании Popper

  • Всегда задавать anchorEl, иначе Popper не будет работать.
  • Использовать modifiers для тонкой настройки смещений и поведения при переполнении.
  • Для анимаций применять transition с Grow, Fade или Slide.
  • Комбинировать с ClickAwayListener для управления закрытием.
  • Проверять, что Popper корректно реагирует на изменение размеров окна и контента.

Popper в MUI — гибкий инструмент для построения всплывающих элементов с полноценным контролем позиции и поведения, идеально подходящий для меню, подсказок и кастомных интерфейсных компонентов.

Оглавление