113k
New

悬停卡片

PreviousNext

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

Radix UIBase UI
import {
  Avatar,
  AvatarFallback,

安装

pnpm dlx shadcn@latest add hover-card

使用方法

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

组合

使用以下组合来构建 HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

触发延迟

在触发组件上使用 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,

多方位示例

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

RTL 支持

要在 shadcn/ui 中启用 RTL（从右至左）支持，请参阅 RTL 配置指南。

"use client"

import {

API 参考

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