Popover

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

В Chakra UI Popover состоит из нескольких ключевых компонентов, которые можно комбинировать:

  • Popover – контейнер всего всплывающего окна.
  • PopoverTrigger – оборачивает элемент, на который будет навешено событие открытия Popover.
  • PopoverContent – основной контейнер содержимого Popover.
  • PopoverHeader – заголовок Popover.
  • PopoverBody – тело Popover, где размещается основной контент.
  • PopoverFooter – нижняя часть Popover, часто используется для кнопок действий.
  • PopoverArrow – стрелка, указывающая на элемент-триггер.
  • PopoverCloseButton – кнопка закрытия Popover.

Простейший пример Popover

import { Button, Popover, PopoverTrigger, PopoverContent, PopoverHeader, PopoverBody, PopoverArrow, PopoverCloseButton } from "@chakra-ui/react";

function BasicPopover() {
  return (
    <Popover>
      <PopoverTrigger>
        <Button>Открыть Popover</Button>
      </PopoverTrigger>
      <PopoverContent>
        <PopoverArrow />
        <PopoverCloseButton />
        <PopoverHeader>Заголовок</PopoverHeader>
        <PopoverBody>Это тело Popover с информацией.</PopoverBody>
      </PopoverContent>
    </Popover>
  );
}

В этом примере при нажатии на кнопку открывается всплывающее окно с заголовком, стрелкой и кнопкой закрытия.

Управление состоянием Popover

Popover может управляться как внутренне (по умолчанию), так и внешне через контролируемый state с помощью хука useDisclosure. Это позволяет открывать и закрывать Popover программно.

import { useDisclosure, Button, Popover, PopoverTrigger, PopoverContent, PopoverBody } from "@chakra-ui/react";

function ControlledPopover() {
  const { isOpen, onOpen, onClose } = useDisclosure();

  return (
    <>
      <Button onCl ick={onOpen}>Открыть Popover</Button>
      <Popover isOpen={isOpen} onCl ose={onClose}>
        <PopoverTrigger>
          <Button>Триггер</Button>
        </PopoverTrigger>
        <PopoverContent>
          <PopoverBody>Контролируемый Popover</PopoverBody>
        </PopoverContent>
      </Popover>
    </>
  );
}

Использование useDisclosure предоставляет три метода: isOpen, onOpen и onClose, позволяя гибко управлять состоянием Popover из внешнего кода.

Настройка позиции и поведения

Popover по умолчанию позиционируется относительно триггерного элемента. Для управления позиционированием используется проп placement, который принимает значения: top, bottom, left, right, а также их варианты с -start и -end.

<Popover placement="right-start">
  <PopoverTrigger>
    <Button>Попробовать Right-Start</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverBody>Popover справа сверху</PopoverBody>
  </PopoverContent>
</Popover>

Кроме того, можно управлять поведением закрытия Popover через проп closeOnBlur (закрытие при клике вне Popover) и closeOnEsc (закрытие по клавише Escape).

Анимации и transition

Chakra UI поддерживает анимацию открытия и закрытия Popover через встроенные transition-пропсы. Например, можно задать motionPreset: scale, slideInBottom, slideInRight.

<Popover motionPreset="scale">
  <PopoverTrigger>
    <Button>Popover с анимацией</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverBody>Анимация Scale</PopoverBody>
  </PopoverContent>
</Popover>

Комбинация с формами и интерактивными элементами

Popover часто используется для небольших форм, селектов или подтверждений действий. Все интерактивные элементы внутри Popover остаются фокусируемыми и управляемыми.

<Popover>
  <PopoverTrigger>
    <Button>Ввод текста</Button>
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverBody>
      <input type="text" placeholder="Введите значение" />
      <Button mt={2}>Отправить</Button>
    </PopoverBody>
  </PopoverContent>
</Popover>

Важно помнить, что Popover автоматически управляет фокусом при открытии, возвращая его к триггеру после закрытия, что обеспечивает корректную доступность.

Комбинирование с другими компонентами Chakra UI

Popover можно легко интегрировать с IconButton, Avatar, Menu и другими интерактивными элементами. Например, создание Popover для аватара пользователя:

<Popover>
  <PopoverTrigger>
    <Avatar name="Иван Иванов" />
  </PopoverTrigger>
  <PopoverContent>
    <PopoverArrow />
    <PopoverHeader>Профиль</PopoverHeader>
    <PopoverBody>
      Настройки аккаунта и действия
    </PopoverBody>
  </PopoverContent>
</Popover>

Такой подход позволяет создавать компактные и интуитивно понятные всплывающие панели для взаимодействия пользователя с интерфейсом.

Советы по использованию

  • Использовать Popover для краткой и контекстной информации, избегая перегрузки контента.
  • Для сложных форм лучше применять Modal, так как Popover ограничен размерами и пространством.
  • Обязательно тестировать Popover на мобильных устройствах, так как размеры экрана влияют на позиционирование.
  • Компоненты PopoverArrow и PopoverCloseButton улучшают UX, делая Popover визуально понятным и удобным для закрытия.

Popover в Chakra UI предоставляет гибкий, настраиваемый и доступный способ отображения всплывающих элементов интерфейса, сохраняя при этом легкость интеграции с другими компонентами библиотеки.

Оглавление