124k
New

悬停卡片

PreviousNext

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

Base UIRadix 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>悬停</HoverCardTrigger>
  <HoverCardContent>
    React 框架 – 由 @vercel 创建和维护。
  </HoverCardContent>
</HoverCard>

组合

使用以下组合来构建 HoverCard:

HoverCard
├── HoverCardTrigger
└── HoverCardContent

触发延迟

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

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

定位

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

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

基础

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

侧边

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

RTL 支持

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

"use client"

import {

API 参考

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