Skip to main content

悬浮卡片 HoverCard

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

📦 引入方式​

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

🧩 使用示例​

📑 组件 API​

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

💄 默认样式​

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 组件。