Popper
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 />;
IPopperProps extends IOutsideClickProps
, IPortalProps
, IUniqueIDProps
, IScaleProps
Property | Description |
---|---|
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 Partial<OptionsPreventOverflow> | 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 Partial<OptionsComputeStyles> | PopperJS modifier settings for applying styles |
eventListeners Partial<OptionsEventListeners> | PopperJS modifier settings responsible for subscribing to global events |
onFirstUpdate Options["onFirstUpdate"] | |
positionFixed | By default, Popper is styled as position: absolute. Allows to switch to fixed |
eventsDisabled | Turns off subscription to global |
displayEvents | Trigger events to show and hide the popper |
displayTimeout | 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.
|
Popper.Trigger
The element to which <Popper.Popper/>
will be attached.
import Popper from '@semcore/ui/popper';
<Popper.Trigger />;
IPopperTriggerProps extends IBoxProps
Popper.Popper
The element which will be attached to <Popper.Trigger/>
.
import Popper from '@semcore/ui/popper';
<Popper.Popper />;
IPopperPopperProps extends IBoxProps
, INeighborLocationProps