悬浮卡片 HoverCard

HoverCard 是基于 @radix-ui/react-hover-card 构建的组件，用于在鼠标悬停时显示额外的信息内容。它常用于展示用户资料、提示卡片等。

---

📦 引入方式

import { HoverCard, HoverCardContent, HoverCardTrigger } from '@itera-web/react-ui-hovercard';

---

🧩 使用示例

示例

源码

<HoverCard openDelay={0} closeDelay={0}>
  <HoverCardTrigger asChild>
    <button className="underline">查看详情</button>
  </HoverCardTrigger>
  <HoverCardContent>
    <div>这是一个悬浮卡片内容</div>
  </HoverCardContent>
</HoverCard>

---

📑 组件 API

组件名	描述	主要 Props（类型 - 默认值 - 说明）
HoverCard	根组件，用于包裹 HoverCardTrigger 和 HoverCardContent	—
HoverCardTrigger	触发器组件，支持 asChild 将任意元素变为触发元素	asChild (boolean) - false - 是否将子元素作为触发器
HoverCardContent	卡片内容组件，悬停时显示，支持位置、动画、样式等设置	className (string) - — - 自定义样式类 align (`'start' 、 'center' 、 'end'`)	'center'- 对齐方式 sideOffset (number) - 4 - 偏移距离

---

🧩 Props

属性	类型	默认值	说明
openDelay	Number	1000	弹出延时
closeDelay	Number	1000	关闭延时

---

💄 默认样式

HoverCardContent 默认样式包括：

• 圆角（rounded-md）
• 边框（border）
• 背景色与文字色（bg-popover、text-popover-foreground）
• 阴影（shadow-md）
• 动画效果（渐变、缩放、滑入滑出） 你可以通过 className 覆盖这些样式。

---

📌 注意事项

• HoverCardTrigger 必须放在 HoverCard 内部，并且紧跟在 HoverCardContent 前面。
• 推荐使用 asChild 将自定义元素（如 button、a 标签等）作为触发器。
• 动画和对齐样式可通过 data- 属性控制，已内建在 Tailwind 类中。

---

🧱 依赖项

• @radix-ui/react-hover-card
• clsx（通过 cn 工具函数用于合并 className）

如需更复杂的交互（例如点击触发、延迟关闭等），建议使用 Popover 或 Dialog 组件。