109k
新建

悬浮卡片

上一页下一页

让视力正常的用户可以预览链接背后的内容。

Radix UIBase UI
Radix UI - shadcn/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>
    The React Framework – created and maintained by @vercel.
  </HoverCardContent>
</HoverCard>

触发延迟

在 HoverCard 上使用 openDelay 和 closeDelay 来控制卡片的打开和关闭时机。

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

定位

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

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

示例

基础用法

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

侧边方位 (Sides)

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

RTL (从右至左)

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

"use client"

import { Button } from "@/examples/radix/ui-rtl/button"

API 参考

更多信息请查看 Radix UI 文档。