106k
New

悬停卡片

PreviousNext

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

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

安装

pnpm dlx shadcn@latest add hover-card

使用方法

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

触发延迟

使用 openDelay 和 closeDelay 属性来控制卡片的打开和关闭时间。

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>Hover</HoverCardTrigger>
  <HoverCardContent>内容</HoverCardContent>
</HoverCard>

定位

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

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

示例

基础示例

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

位置示例

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

API 参考

更多信息请参阅 Radix UI 文档。