◇
Popover
10 partsAnatomy
Import the parts and compose them. Each part forwards attributes to its underlying element.
vue
import {
PopoverRoot,
PopoverTrigger,
PopoverAnchor,
PopoverContent,
PopoverPortal,
PopoverArrow,
PopoverClose,
PopoverContentImpl,
PopoverContentModal,
PopoverContentNonModal,
} from '@robonen/primitives/popover';
<PopoverRoot>
<PopoverTrigger />
<PopoverAnchor />
<PopoverContent />
<PopoverPortal />
<PopoverArrow />
<PopoverClose />
<PopoverContentImpl />
<PopoverContentModal />
<PopoverContentNonModal />
</PopoverRoot>API Reference
PopoverRoot
Root| Prop | Type | Description |
|---|---|---|
defaultOpen? | boolean | Uncontrolled initial open state. Ignored once `v-model:open` is bound. |
modal? | boolean | Modal mode traps focus, locks scroll, and disables outside pointer events. |
PopoverTrigger
TriggerNo props or events — renders its element and forwards attributes.
PopoverAnchor
AnchorNo props or events — renders its element and forwards attributes.
PopoverContent
Content| Prop | Type | Description |
|---|---|---|
forceMount? | boolean | Keep mounted for CSS exit animations. |
PopoverPortal
PortalNo props or events — renders its element and forwards attributes.
PopoverArrow
ArrowNo props or events — renders its element and forwards attributes.
PopoverClose
CloseNo props or events — renders its element and forwards attributes.
PopoverContentImpl
ContentImpl| Prop | Type | Description |
|---|---|---|
trapFocus? | boolean | Trap focus inside the content (modal popovers). |
disableOutsidePointerEvents? | boolean | Block outside pointer events (modal popovers). |
PopoverContentModal
ContentModalNo props or events — renders its element and forwards attributes.
PopoverContentNonModal
ContentNonModalNo props or events — renders its element and forwards attributes.