Skip to content

Popper

Utils 🛠
4.16.12

Popper

This is a wrapper for creating a context, which does not create additional nodes in the house.

import Popper from '@semcore/ui/popper';
<Popper />;
PropertyDescription
strategy
Strategy = absolute

Popper can have different positioning options

modifiers

Modifiers for popper.js

placement
Placement = auto

The position of the popper relative to the trigger that called it. 'auto-start' | 'auto' | 'auto-end' | 'top-start' | 'top' | 'top-end' | 'right-start' | 'right' | 'right-end' | 'bottom-end' | 'bottom' | 'bottom-start' | 'left-end' | 'left' | 'left-start'

interaction
"click" | "hover" | "focus" | "none" | eventInteraction = click

Interaction with a trigger to show and hide the popper

timeout
number | [numbernumber]

Timer to show and hide the popper

visible
boolean

Popper visibility value

defaultVisible
boolean = false

Default popper visibility

onVisibleChange
(visible: boolean, e: Event) => boolean | void

Function called when visibility changes

offset
Partial<OptionsOffset> | number | [numbernumber]

PopperJS modifier settings for popper indent

preventOverflow

PopperJS modifier settings for finding borders

arrow
Partial<OptionsArrow>

PopperJS modifier settings responsible for the arrow

flip
Partial<OptionsFlip>

PopperJS modifier settings responsible for turning the popper when there is not enough space

computeStyles

PopperJS modifier settings for applying styles

eventListeners

PopperJS modifier settings responsible for subscribing to global events

onFirstUpdate
Options["onFirstUpdate"]
positionFixed
boolean
deprecated v4.0.0
use IPopperProps.strategy instead

By default, Popper is styled as position: absolute. Allows to switch to fixed

eventsDisabled
boolean
deprecated v4.0.0
use IPopperProps.eventListeners instead

Turns off subscription to global resize/scroll events

displayEvents
{show: string[]hide: string[]}
deprecated v4.0.0
use IPopperProps.interaction instead

Trigger events to show and hide the popper

displayTimeout
{show: numberhide: number}
deprecated v4.0.0
use IPopperProps.timeout instead

Trigger timer to show and hide the popper

popperZIndex
string | number
deprecated v4.0.0

z-index Popper.Popper

boundary
"scrollParent" | "viewport" | "window" | HTMLElement
deprecated v4.0.0
use IPopperProps.preventOverflow instead

Defines the border element used by Popper for its flip and preventOverflow modifiers. Three abbreviated keywords are supported; Popper will find the correct DOM element. 'scrollParent' | 'viewport' | 'window' | HTMLElement

Popper.Trigger

The element to which <Popper.Popper/> will be attached.

import Popper from '@semcore/ui/popper';
<Popper.Trigger />;
interface
IPopperTriggerProps extends IBoxProps

Popper.Popper

The element which will be attached to <Popper.Trigger/>.

import Popper from '@semcore/ui/popper';
<Popper.Popper />;
interface
IPopperPopperProps extends IBoxProps, INeighborLocationProps