Popover

Popover в Ant Design представляет собой всплывающий контейнер, который отображает дополнительную информацию при наведении, клике или фокусе на элемент. Он служит для улучшения UX, позволяя компактно скрывать информацию и раскрывать её по необходимости.

import { Popover, Button } from 'antd';

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

Popover состоит из трех ключевых элементов:

  1. triggerElement – элемент, который вызывает всплывающее окно (кнопка, иконка, текст).
  2. content – содержимое всплывающего окна, может быть простым текстом или JSX-компонентом.
  3. title (опционально) – заголовок всплывающего окна.

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

<Popover content="Дополнительная информация" title="Заголовок">
  <Button>Наведи или кликни</Button>
</Popover>

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

Trigger

Свойство trigger управляет способом вызова Popover:

  • 'hover' – при наведении курсора.
  • 'click' – при клике.
  • 'focus' – при фокусе на элементе.
  • 'contextMenu' – вызов контекстного меню (правый клик).
<Popover content="Содержимое" trigger="click">
  <Button>Кликни меня</Button>
</Popover>

Placement

Свойство placement определяет расположение Popover относительно элемента:

  • 'top', 'left', 'right', 'bottom'
  • 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'
  • 'leftTop', 'leftBottom', 'rightTop', 'rightBottom'
<Popover content="Информация" placement="rightTop">
  <Button>Позиция справа сверху</Button>
</Popover>

Контент Popover

Содержимое может быть текстом, JSX, изображениями, списками или даже сложными компонентами.

<Popover
  title="Подробности"
  content={
    <div>
      <p>Пункт 1: описание</p>
      <p>Пункт 2: описание</p>
    </div>
  }
>
  <Button>Показать детали</Button>
</Popover>

Управление видимостью

Popover можно контролировать вручную с помощью свойства visible и событий onVisibleChange.

const [visible, setVisible] = React.useState(false);

<Popover
  content="Контролируемый Popover"
  visible={visible}
  onVisibleCha nge={setVisible}
>
  <Button onCl ick={() => setVisible(!visible)}>Переключить</Button>
</Popover>

Использование с формами и интерактивными элементами

Popover хорошо работает с формами и интерактивными компонентами. Например, можно разместить внутри него поля ввода:

<Popover
  title="Войти"
  content={
    <div>
      <input placeholder="Логин" />
      <input placeholder="Пароль" type="password" />
      <Button type="primary">Войти</Button>
    </div>
  }
  trigger="click"
>
  <Button>Авторизация</Button>
</Popover>

Настройка стиля

Для стилизации Popover можно использовать:

  • Свойство overlayClassName – добавление кастомного CSS класса.
  • Свойство overlayStyle – добавление инлайнового стиля.
<Popover
  content="Стильный Popover"
  overlayStyle={{ backgroundColor: '#f0f0f0', padding: '20px' }}
>
  <Button>Стилизация</Button>
</Popover>

Анимация и задержка

Свойства mouseEnterDelay и mouseLeaveDelay позволяют настроить задержку появления и скрытия Popover при наведении.

Свойство arrowPointAtCenter заставляет стрелку Popover указывать точно на центр триггера:

<Popover
  content="Popover с задержкой"
  mouseEnterDelay={0.5}
  mouseLeaveDelay={0.3}
  arrowPointAtCenter
>
  <Button>Наведи с задержкой</Button>
</Popover>

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

Popover часто используется вместе с:

  • Tooltip – для подсказок и небольших текстов.
  • Button – для интерактивных действий.
  • Form – для компактного ввода данных.

Можно создавать сложные интерактивные панели, меню или карточки с действиями, помещая внутри Popover любые React-компоненты.

Эта система позволяет гибко управлять отображением информации, создавая аккуратный интерфейс с минимальным использованием пространства.

Оглавление