🌐 Nodejs.cn
新建

悬停卡

PreviousNext

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

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

安装

🌐 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

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

🌐 Use openDelay and closeDelay on the HoverCard to control when the card opens and closes.

<HoverCard openDelay={100} closeDelay={200}>
  <HoverCardTrigger>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 { Button } from "@/components/ui/button"
import {
  HoverCard,

边

🌐 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/radix/ui-rtl/button"

API参考

🌐 API Reference

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

🌐 See the Radix UI documentation for more information.