KPopover

示例

Popover component with trigger and content sub-components. Supports click and hover triggers with configurable placement.

Sub-Components

• KPopover — Root container that manages open state and provides context
• KPopoverTrigger — Wraps the element that triggers the popover
• KPopoverContent | Teleported content panel positioned relative to the trigger

Props (KPopover)

Name	Type	Default	Description
open	boolean	false	Whether the popover is visible.
placement	'top' | 'bottom' | 'left' | 'right'	'bottom'	Placement of the popover relative to the trigger. Also drives the direction of the slide-in transition.
trigger	'click' | 'hover'	'click'	How the popover is triggered.
showArrow	boolean	true	Whether to show an arrow pointing at the trigger.

Emits

Name	Parameters	Description
update:open	(value: boolean)	Emitted when the popover open state changes.

Slots (KPopover)

Name	Description
default	Should contain KPopoverTrigger and KPopoverContent.

Basic Usage

<script setup> import { ref } from 'vue' import { KPopover, KPopoverTrigger, KPopoverContent } from '@kK-2004/ui-component' const open = ref(false) </script> <template> <KPopover v-model:open="open" placement="bottom" trigger="click"> <KPopoverTrigger> <KButton>Open Popover</KButton> </KPopoverTrigger> <KPopoverContent> <p>Popover content goes here.</p> </KPopoverContent> </KPopover> </template>