Popover

Displays rich content in a portal, triggered by a button.

Usage

Import all parts and piece them together. It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
 
const {
  Popover,
  PopoverTrigger,
  PopoverAnchor,
  PopoverContent,
  popoverContentClassname,
} = VM.require("uiisnear.near/widget/popover");
 
if (Tailwind == undefined) return "";

<Tailwind>
  <Popover>
    <PopoverTrigger>Open</PopoverTrigger>
    <PopoverContent>Place content for the popover here.</PopoverContent>
  </Popover>
</Tailwind>

API Reference

Popover

Contains all the parts of a popover.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---
modal	boolean	true

PopoverTrigger

The button that toggles the popover. By default, the PopoverContent will position itself against the trigger.

Data attribute	Values
[data-state]	"open" \| "closed"

PopoverContent

The component that pops out when the popover is open.

Prop	Type	Default
onOpenAutoFocus	function	---
onCloseAutoFocus	function	---
onEscapeKeyDown	function	---
onPointerDownOutside	function	---
onFocusOutside	function	---
onInteractOutside	function	---
forceMount	boolean	---
side	enum	"bottom"
sideOffset	number	0
align	enum	"center"
alignOffset	number	0
avoidCollisions	boolean	true
collisionBoundary	Boundary	[]
collisionPadding	number \| Padding	0
arrowPadding	number	0
sticky	enum	"partial"
hideWhenDetached	boolean	false

Data attribute	Values
[data-state]	"open" \| "closed"
[data-side]	"left" \| "right" \| "bottom" \| "top"
[data-align]	"start" \| "end" \| "center"

PopoverAnchor

An optional element to position the PopoverContent against. If this part is not used, the content will position alongside the PopoverTrigger.

Classnames

Classnames available to customize the component.

Function	Classname
PopoverContent	popoverContentClassname

Pagination Progress