浮层组件

悬浮卡片

鼠标悬停时显示的预览卡片，适用于展示用户资料、链接预览等补充信息，不阻断用户操作流程。

安装

bash

pnpm dlx shadcn@latest add hover-card -c packages/react

预览链接

tsx

import { HoverCard, HoverCardTrigger, HoverCardContent } from "@polyui/react/hover-card"
import { Button } from "@polyui/react/button"
export function HoverCardPreview() {
  return (
    <HoverCard>
      <HoverCardTrigger render={<Button variant="link" />}>@polyui</HoverCardTrigger>
      <HoverCardContent className="w-72">
        <div className="space-y-2">
          <div className="flex items-center gap-3">
            <div className="h-10 w-10 rounded-full bg-primary/10 flex items-center justify-center text-primary font-bold text-sm">
              P
            </div>
            <div>
              <p className="text-sm font-semibold">PolyUI</p>
              <p className="text-xs text-muted-foreground">@polyui</p>
            </div>
          </div>
          <p className="text-sm text-muted-foreground">
            A beautifully designed, accessible component library for building modern UIs.
          </p>
          <p className="text-xs text-muted-foreground">Joined January 2024</p>
        </div>
      </HoverCardContent>
    </HoverCard>
  )
}

属性

HoverCardContent

属性	类型	默认值	说明
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	卡片相对触发元素的显示方向。
`sideOffset`	`number`	`4`	卡片与触发元素的间距（px）。
`align`	`"start" \| "center" \| "end"`	`"center"`	卡片的对齐方式。
`alignOffset`	`number`	`4`	对齐方向的偏移量（px）。
`className`	`string`	`—`	自定义样式类名。