Popper

Низкоуровневый компонент для отрисовки выпадающего блока. Единственная его задача — корректно позиционироваться рядом с целевым элементом.

Загружается...

Виртуальный элемент

Помимо ссылки на DOM элемент, Popper можем принимать координаты виртуального элемента. Виртуальный элемент представляет из себя объект со свойством getBoundingClientRect().

Загружается...

Свойства и методы

Свойство	Описание
`arrow`	`boolean` Отображать ли стрелку, указывающую на якорный элемент. По умолчанию: `-`
`arrowHeight`	`number` Высота стрелки. Складывается с `mainAxis`, чтобы стрелка не залезала на якорный элемент. По умолчанию: `8`
`ArrowIcon`	`ComponentType<SVGAttributes<SVGSVGElement>>` Пользовательская SVG иконка. Требования: Иконка по умолчанию должна быть направлена вверх (a.k.a `IconUp`). Чтобы избежать проблемы с пространством между стрелкой и контентом на некоторых экранах, растяните кривую по высоте на `1px` и увеличьте на этот размер `height` и `viewBox` SVG. (смотри https://github.com/VKCOM/VKUI/pull/4496 ↗). Передайте высоту иконки в параметр `arrowHeight`. В значении высоты можно исключить хак с `1px` из п.2. Убедитесь, что компонент принимает все валидные для SVG параметры. Убедитесь, что SVG и её элементы наследует цвет через `fill="currentColor"`. По умолчанию: (props: React.SVGAttributes<SVGSVGElement>): React.ReactNode => { return ( <svg width={DEFAULT_ARROW_WIDTH} height={ARROW_HEIGHT_WITH_WHITE_SPACE} viewBox={`0 0 ${DEFAULT_ARROW_WIDTH} ${ARROW_HEIGHT_WITH_WHITE_SPACE}`} xmlns="http://www.w3.org/2000/svg" {...props} > <path d="M10 0c3 0 6 8 10 8v1H0V8c3.975 0 7-8 10-8Z" fill="currentColor" /> </svg> ); }
`arrowPadding`	`number` Безопасная зона вокруг стрелки, чтобы та не выходила за края контента. По умолчанию: `10`
`arrowProps`	`FloatingArrowProps` Позволяет набросить на стрелку пользовательские атрибуты. По умолчанию: `-`
`arrowRef`	`Element \| MutableRefObject<Element \| null> \| null` По умолчанию: `-`
`autoUpdateOnTargetResize`	`boolean` Подписывается на изменение геометрии `targetRef`, чтобы пересчитать свою позицию. По умолчанию: `false`
`customMiddlewares`	`{ name: string; options?: any; fn: (state: { placement: Placement; platform: Platform; strategy: Strategy; x: number; y: number; initialPlacement: Placement; middlewareData: MiddlewareData; rects: ElementRects; elements: Elements; }) => Promisable<...>; }[]` Массив кастомных модификаторов для Popper (необходимо мемоизировать). По умолчанию: `-`
`defaultShown`	`boolean` Начальное состояние всплывающего элемента. По умолчанию: `-`
`disableFlipMiddleware`	`boolean` Указанное значение `placement` форсируется, даже если для выпадающего элемента недостаточно места. Не оказывает влияния при `placement` значениях - `'auto' \| 'auto-start' \| 'auto-end'` По умолчанию: `false`
`flipMiddlewareFallbackAxisSideDirection`	`"start" \| "none" \| "end"` Задаёт резервный вариант размещения по перпендикулярной оси. По умолчанию: `-`
`getRootRef`	`Ref<HTMLDivElement>` По умолчанию: `-`
`hideWhenReferenceHidden`	`boolean` Принудительно скрывает компонент если целевой элемент вышел за область видимости. По умолчанию: `-`
`hoverDelay`	`number \| [number, number]` Количество миллисекунд, после которых произойдёт показ/скрытие всплывающего элемента при наведении. Чтобы задать разное время на показ и скрытие, передайте массив типа `[<показ>, <скрытие>]`. Используется только для `trigger="hover"`. По умолчанию: `-`
`offsetByCrossAxis`	`number` Отступ по вспомогательной оси. По умолчанию: `0`
`offsetByMainAxis`	`number` Отступ по главной оси. По умолчанию: `8`
`onPlacementChange`	`OnPlacementChange` В зависимости от области видимости, позиция может смениться на более оптимальную, чтобы всплывающий элемент вместился в эту область видимости. По умолчанию: `-`
`onReferenceHiddenChange`	`((hidden: boolean) => void)` Событие скрытия / раскрытия компонента при использовании свойства `hideWhenReferenceHidden`. Стоит иметь ввиду, что событие также будет вызвано и при новом рендере компонента По умолчанию: `-`
`onShownChange`	`OnShownChange` Вызывается при каждом изменении видимости всплывающего элемента. По умолчанию: `-`
`placement`	`PlacementWithAuto` По умолчанию компонент выберет наилучшее расположение сам, но приоритетное можно задать с помощью этого свойства. По умолчанию: `bottom-start`
`sameWidth`	`boolean` Выставлять ширину равной target элементу. По умолчанию: `-`
`shown`	`boolean` Если передан, то всплывающий элемент будет показано/скрыто в зависимости от значения свойства. По умолчанию: `-`
`strategy`	`Strategy` Стратегия позиционирования всплывающего элемента. `"fixed"` - позиционируется, используя `position: fixed`. Является значением по умолчанию `"absolute"` - позиционируется, используя `position: absolute`, относительно ближайшего элемента с `position: relative` `strategy="absolute"` Рекомендуется использовать с `usePortal={false}`. И нужно не забыть обернуть в элемент с `position: relative` По умолчанию: `-`
`targetRef`	`RefObject<HTMLElement \| null> \| VirtualElement` Ref на якорный элемент. По умолчанию: `-`
`usePortal`	`boolean \| HTMLElement \| RefObject<HTMLElement>` По умолчанию используется document.body. По умолчанию: `true`
`zIndex`	`string \| number` Перебивает zIndex заданный по умолчанию. По умолчанию: `-`

Popover

Tooltip