气泡提示 Popover

该组件封装自 Radix UI Popover，添加了 Ant Design 风格的 placement 支持及默认样式，适用于构建提示卡片、浮层表单、操作菜单等场景。

---

📦 引入方式

import { Popover, PopoverContent, PopoverTrigger } from '@npmqg/react-ui-popover';

---

🧩 使用示例

示例

Loading...

源码

<Popover>
  <PopoverTrigger>
    <button>打开弹出层</button>
  </PopoverTrigger>
  <PopoverContent>
    <p>这里是内容</p>
  </PopoverContent>
</Popover>

示例

Loading...

源码

<Popover>
  <PopoverTrigger>
    <Button>左上弹出</Button>
  </PopoverTrigger>
  <PopoverContent placement="leftTop">
    <div>左上内容</div>
  </PopoverContent>
</Popover>

示例

Loading...

源码

<Popover>
  <PopoverTrigger>
    <Button variant="outline">更多操作</Button>
  </PopoverTrigger>
  <PopoverContent placement="bottomRight">
    <div className="flex flex-col space-y-2">
      <Button variant="ghost">编辑</Button>
      <Button variant="ghost">复制链接</Button>
      <Button variant="destructive">删除</Button>
    </div>
  </PopoverContent>
</Popover>

---

🧩 组件结构

组件名	说明	主要属性 / 行为说明
Popover	根组件，提供打开/关闭状态管理	无特有属性（作为状态容器使用）
PopoverTrigger	弹出触发器，包裹任意 React 节点	通常使用 asChild 使原生元素触发 Popover
PopoverContent	弹出层内容，支持位置、偏移、样式等配置	详见下方 Props 表

---

🎯 placement 定位映射

placement	side (Radix)	align (Radix)
'topLeft'	'top'	'start'
'top'	'top'	'center'
'topRight'	'top'	'end'
'bottomLeft'	'bottom'	'start'
'bottom'	'bottom'	'center'
'bottomRight'	'bottom'	'end'
'leftTop'	'left'	'start'
'left'	'left'	'center'
'leftBottom'	'left'	'end'
'rightTop'	'right'	'start'
'right'	'right'	'center'
'rightBottom'	'right'	'end'

---

⚙️ PopoverContent Props

属性	类型	默认值	说明
placement	keyof typeof placementMap	'bottom'	使用 AntD 风格的定位关键字
sideOffset	number	4	弹出内容与触发元素之间的像素偏移
className	string	—	自定义样式类名
...props	React.ComponentPropsWithoutRef	—	支持 Radix 的原生 Popover 内容属性

---

🎨 默认样式（Tailwind）

• 宽度：w-48
• 内边距：p-4
• 背景：bg-popover / bg-background
• 阴影：shadow-md
• 动画：
  • fade-in/zoom-in 开启时
  • fade-out/zoom-out 关闭时
  • 各方向滑动动画（slide-in-from-*） 你可以通过 className 扩展或覆盖样式。

---

🧠 设计说明

• 默认关闭 avoidCollisions 和 collisionPadding，避免干扰你自己控制位置
• 通过 placementMap 实现更直观的定位 API
• 支持动画状态和原点定位：Radix 原始动画与变换原点被保留