106k
New

悬停卡片

PreviousNext

供有视力的用户预览链接背后内容。

Radix UIBase UI
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

安装

pnpm dlx shadcn@latest add hover-card

使用方法

import {
  HoverCard,
  HoverCardContent,
  HoverCardTrigger,
} from "@/components/ui/hover-card"
<HoverCard>
  <HoverCardTrigger>悬停</HoverCardTrigger>
  <HoverCardContent>
    React 框架 — 由 @vercel 创建和维护。
  </HoverCardContent>
</HoverCard>

触发延迟

在触发组件上使用 delay 和 closeDelay 来控制卡片何时打开和关闭。

<HoverCard>
  <HoverCardTrigger delay={100} closeDelay={200}>
    悬停
  </HoverCardTrigger>
  <HoverCardContent>内容</HoverCardContent>
</HoverCard>

位置设置

使用 HoverCardContent 上的 side 和 align 属性控制位置。

<HoverCard>
  <HoverCardTrigger>悬停</HoverCardTrigger>
  <HoverCardContent side="top" align="start">
    内容
  </HoverCardContent>
</HoverCard>

示例

基本示例

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

多方位示例

import { Button } from "@/components/ui/button"
import {
  HoverCard,

API 参考

更多信息请参见 Base UI 文档。