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>