Radix 首页
WorkOS 出品
Radix 首页
WorkOS 出品
主题主题PrimitivesPrimitives图标图标颜色颜色
文档案例研究博客
组件

悬停卡片

供有视觉用户预览链接后可用的内容。

import * as React from "react";

import { HoverCard } from "radix-ui";

import "./styles.css";



const HoverCardDemo = () => (

	<HoverCard.Root>

		<HoverCard.Trigger asChild>

			<a
				className="ImageTrigger"
				href="https://twitter.com/radix_ui"
				target="_blank"
				rel="noreferrer noopener"
			>

				<img
					className="Image normal"
					src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
					alt="Radix UI"
				/>

			</a>

		</HoverCard.Trigger>

		<HoverCard.Portal>

			<HoverCard.Content className="HoverCardContent" sideOffset={5}>

				<div style={{ display: "flex", flexDirection: "column", gap: 7 }}>

					<img
						className="Image large"
						src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
						alt="Radix UI"
					/>

					<div style={{ display: "flex", flexDirection: "column", gap: 15 }}>

						<div>

							<div className="Text bold">Radix</div>

							<div className="Text faded">@radix_ui</div>

						</div>

						<div className="Text">

							Components, icons, colors, and templates for building

							high-quality, accessible UI. Free and open-source.

						</div>

						<div style={{ display: "flex", gap: 15 }}>

							<div style={{ display: "flex", gap: 5 }}>

								<div className="Text bold">0</div>{" "}

								<div className="Text faded">Following</div>

							</div>

							<div style={{ display: "flex", gap: 5 }}>

								<div className="Text bold">2,900</div>{" "}

								<div className="Text faded">Followers</div>

							</div>

						</div>

					</div>

				</div>



				<HoverCard.Arrow className="HoverCardArrow" />

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>

);



export default HoverCardDemo;

特性

    可控制或非控制。

    自定义侧边、对齐、偏移、碰撞处理。

    可选渲染指向箭头。

    支持自定义打开和关闭延迟。

    屏幕阅读器忽略。

安装

从命令行安装组件。

npm install @radix-ui/react-hover-card

解剖

导入所有部分并将它们组合在一起。

import { HoverCard } from "radix-ui";



export default () => (

	<HoverCard.Root>

		<HoverCard.Trigger />

		<HoverCard.Portal>

			<HoverCard.Content>

				<HoverCard.Arrow />

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>

);

API 参考

Root

包含悬停卡片的所有部分。

Prop类型默认值
defaultOpen
boolean
无默认值
open
boolean
无默认值
onOpenChange
function
无默认值
openDelay
number
700
closeDelay
number
300

Trigger

悬停时打开悬停卡片的链接。

Prop类型默认值
asChild
boolean
false
Data 属性值
[data-state]"open" |"closed"

Portal

使用时，将内容部分传送到 body 中。

Prop类型默认值
forceMount
boolean
无默认值
container
HTMLElement
document.body

Content

悬停卡片打开时弹出的组件。

Prop类型默认值
asChild
boolean
false
forceMount
boolean
无默认值
side
enum
"bottom"
sideOffset
number
0
align
enum
"center"
alignOffset
number
0
avoidCollisions
boolean
true
collisionBoundary
Boundary
[]
collisionPadding
number | Padding
0
arrowPadding
number
0
sticky
enum
"partial"
hideWhenDetached
boolean
false
Data 属性值
[data-state]"open" |"closed"
[data-side]"left" |"right" |"bottom" |"top"
[data-align]"start" |"end" |"center"
CSS 变量描述
--radix-hover-card-content-transform-origin从内容和箭头位置/偏移计算出的 transform-origin
--radix-hover-card-content-available-width触发器和边界边缘之间的剩余宽度
--radix-hover-card-content-available-height触发器和边界边缘之间的剩余高度
--radix-hover-card-trigger-width触发器的宽度
--radix-hover-card-trigger-height触发器的高度

Arrow

一个可选的箭头元素，与悬停卡片一起渲染。这可以用来帮助视觉上将触发器与 HoverCard.Content 链接起来。必须在 HoverCard.Content 内部渲染。

Prop类型默认值
asChild
boolean
false
width
number
10
height
number
5

示例

立即显示

使用 openDelay prop 来控制悬停卡片打开所需的时间。

import { HoverCard } from "radix-ui";



export default () => (

	<HoverCard.Root openDelay={0}>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content>…</HoverCard.Content>

	</HoverCard.Root>

);

约束内容大小

您可能想要约束内容的宽度，使其与触发器宽度匹配。您可能还想约束其高度，使其不超过视口。

我们公开了几个 CSS 自定义属性，例如 --radix-hover-card-trigger-width 和 --radix-hover-card-content-available-height 以支持这一点。使用它们来约束内容尺寸。

// index.jsx

import { HoverCard } from "radix-ui";

import "./styles.css";



export default () => (

	<HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Portal>

			<HoverCard.Content className="HoverCardContent" sideOffset={5}>

				…

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>

);

/* styles.css */

.HoverCardContent {

	width: var(--radix-hover-card-trigger-width);

	max-height: var(--radix-hover-card-content-available-height);

}

源感知动画

我们公开了一个 CSS 自定义属性 --radix-hover-card-content-transform-origin。使用它来根据 side、sideOffset、align、alignOffset 和任何碰撞，从其计算的源点动画内容。

// index.jsx

import { HoverCard } from "radix-ui";

import "./styles.css";



export default () => (

	<HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content className="HoverCardContent">…</HoverCard.Content>

	</HoverCard.Root>

);

/* styles.css */

.HoverCardContent {

	transform-origin: var(--radix-hover-card-content-transform-origin);

	animation: scaleIn 0.5s ease-out;

}



@keyframes scaleIn {

	from {

		opacity: 0;

		transform: scale(0);

	}

	to {

		opacity: 1;

		transform: scale(1);

	}

}

碰撞感知动画

我们公开了 data-side 和 data-align 属性。它们的值将在运行时更改以反映碰撞。使用它们来创建碰撞和方向感知的动画。

// index.jsx

import { HoverCard } from "radix-ui";

import "./styles.css";



export default () => (

	<HoverCard.Root>

		<HoverCard.Trigger>…</HoverCard.Trigger>

		<HoverCard.Content className="HoverCardContent">…</HoverCard.Content>

	</HoverCard.Root>

);

/* styles.css */

.HoverCardContent {

	animation-duration: 0.6s;

	animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);

}

.HoverCardContent[data-side="top"] {

	animation-name: slideUp;

}

.HoverCardContent[data-side="bottom"] {

	animation-name: slideDown;

}



@keyframes slideUp {

	from {

		opacity: 0;

		transform: translateY(10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}



@keyframes slideDown {

	from {

		opacity: 0;

		transform: translateY(-10px);

	}

	to {

		opacity: 1;

		transform: translateY(0);

	}

}

无障碍性

悬停卡片仅供有视觉用户使用，键盘用户将无法访问内容。

键盘交互

按键描述
Tab 键
打开/关闭悬停卡片。
Enter 键
打开悬停卡片链接
上一个Form
下一个Label
在 GitHub 上编辑此页面。