Popover
Импорт осуществляется из директории @salutejs/sdds-insol-next/beta
К примеру:
import * as Beta from '@salutejs/sdds-insol-next/beta';
import { Popover } from '@salutejs/sdds-insol-next/beta';
Описание
Всплывающее окно, привязанное к целевому элементу (target), которое отображает дополнительный контент по клику, наведению или фокусу. Popover идеально подходит для отображения подсказок, контекстных меню и вспомогательных действий.
Popover позволяет отображать всплывающее окно с настраиваемым контентом, позиционированием, триггерами (click, hover, focus), смещением, хвостиком, задержкой открытия/закрытия, ресайзом и стилевыми вариантами.
Быстрый старт
Взаимодействие с компонентом
Свойство target имеет тип ReactElement. Это цель для взаимодействия с всплывающим окном.
Содержимое самого окна нужно класть в children.
Примеры
- Trigger
- Resizable
- Portal
Свойство trigger принимает 3 значения: click, hover и focus. Поле опциональное, и click стоит по умолчанию.
Чтобы включить возможность растягивать Popover нужно настроить свойство resizable. Формат следующий:
resizable?:
| boolean
| {
/**
* Включение/выключение ресайза.
* @default false
*/
disabled?: boolean;
/**
* Направления для ресайза.
*/
directions?: ResizeDirections;
/**
* Начальный размер окна ресайза.
*/
defaultSize?: { width?: number; height?: number };
/**
* Минимальная ширина ресайза в px.
*/
minWidth?: number;
/**
* Минимальная высота ресайза в px.
*/
minHeight?: number;
/**
* Максимальная ширина ресайза в px.
*/
maxWidth?: number;
/**
* Максимальная высота ресайза в px.
*/
maxHeight?: number;
/**
* Кастомные иконки ресайза.
*/
icons?: {
topRight?: ReactNode;
bottomRight?: ReactNode;
bottomLeft?: ReactNode;
topLeft?: ReactNode;
};
/**
* Размер иконки ресайза.
* @default s
*/
iconSize?: 'xs' | 's' | 'm';
/**
* Скрывать ли иконку для ресайза.
* @default false
*/
hiddenIcons?: PlacementMixed[];
};
Для настройки расположения всплывающего окна в DOM используется свойство portal. Особенно полезно при взаимодействии со scrollable-контейнерами.
По-умолчанию блок с выпадающим контентом рендерится на самом верхнем уровне перед тегом </body>.
Стилизация всплывающего окна
Компонент принимает такие свойства, как style и className, которые применяются к тэгу, оборачивающему выпадающее окно.
Ниже приведен пример кастомизации цвета фона и текста с помощью styled-components.