Popper
Popper
This is a wrapper for creating a context, which doesn't create additional nodes in the house.
import Popper from '@semcore/ui/popper';
<Popper />;
PopperPropsOutsideClickProps & PortalProps & UniqueIDProps & Omit<ScaleProps"placement"> & {...}| 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 | [number, number] | 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 | [number, number] | 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"] | |
disableEnforceFocus boolean | Disabled focus trap, autofocus and focus return |
Popper.Trigger
The element to which <Popper.Popper/> will be attached.
import Popper from '@semcore/ui/popper';
<Popper.Trigger />;
PopperTriggerPropsBoxProps & {...}Popper.Popper
The element which will be attached to <Popper.Trigger/>.
import Popper from '@semcore/ui/popper';
<Popper.Popper />;
PopperPopperPropsBoxProps & NeighborLocationProps & {...}| Property | Description |
|---|---|
disableEnforceFocus boolean | Disabled focus trap, autofocus and focus return |