🌐 Nodejs.cn
新建

悬停卡

PreviousNext

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

Radix UIBase UI
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

安装

🌐 Installation

pnpm dlx shadcn@latest add hover-card

用法

🌐 Usage

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

触发延迟

🌐 Trigger Delays

在触发器上使用 delay 和 closeDelay 来控制卡片何时打开和关闭。

🌐 Use delay and closeDelay on the trigger to control when the card opens and closes.

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

定位

🌐 Positioning

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

🌐 Use the side and align props on HoverCardContent to control placement.

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

示例

🌐 Examples

基础

🌐 Basic

import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar"
import { Button } from "@/components/ui/button"
import {

边

🌐 Sides

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

从右到左

🌐 RTL

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

🌐 To enable RTL support in shadcn/ui, see the RTL configuration guide.

"use client"

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

API参考

🌐 API Reference

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

🌐 See the Base UI documentation for more information.