125k
New

悬停卡片

PreviousNext

悬停、聚焦或长按时显示的弹出层，用于预览链接指向的内容。

Base UIReact AriaRadix UI
"use client"

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

安装

pnpm dlx shadcn@latest add hover-card

用法

import { HoverCard, HoverCardTrigger } from "@/components/ui/hover-card"
<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard>
    The React Framework – created and maintained by @vercel.
  </HoverCard>
</HoverCardTrigger>

组合结构

使用以下组合结构构建 HoverCard：

HoverCardTrigger
├── Button
└── HoverCard

触发延迟

在 HoverCardTrigger 上使用 delay 和 closeDelay 控制卡片的打开与关闭时间。

<HoverCardTrigger delay={100} closeDelay={200}>
  <Button variant="link">Hover</Button>
  <HoverCard>Content</HoverCard>
</HoverCardTrigger>

位置

使用 HoverCard 的 placement 属性设置卡片位置。

<HoverCardTrigger>
  <Button variant="link">Hover</Button>
  <HoverCard placement="top">Content</HoverCard>
</HoverCardTrigger>

基础示例

"use client"

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

方向

"use client"

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

RTL

如需在 shadcn/ui 中启用 RTL 支持，请参阅 RTL 配置指南。

"use client"

import {

API 参考

更多信息请参阅 React Aria 文档。