悬停卡片

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

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;

Features

可以是受控或非受控的。

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

可选渲染指向箭头。

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

屏幕阅读器忽略。

安装

从命令行安装组件。

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 参考

根部

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

Prop	Type	Default
`defaultOpen`	`boolean`	No default value
`open`	`boolean`	No default value
`onOpenChange`	`function`	No default value
`openDelay`	`number`	`700`
`closeDelay`	`number`	`300`

触发器

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

Prop	Type	Default
`asChild`	`boolean`	`false`

Data attribute	Values
`[data-state]`	`"open" \| "closed"`

门户

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

Prop	Type	Default
`forceMount`	`boolean`	No default value
`container`	`HTMLElement`	`document.body`

内容

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	No default value
`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 attribute	Values
`[data-state]`	`"open" \| "closed"`
`[data-side]`	`"left" \| "right" \| "bottom" \| "top"`
`[data-align]`	`"start" \| "end" \| "center"`

CSS Variable	Description
`--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`	触发器的高度

箭头

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

Prop	Type	Default
`asChild`	`boolean`	`false`
`width`	`number`	`10`
`height`	`number`	`5`

示例

立即显示

使用 openDelay 属性控制悬停卡片打开的时间。

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);
	}
}

无障碍性

悬停卡片仅用于可视用户，内容对键盘用户不可访问。

键盘交互

Key	Description
`Tab`	打开/关闭悬停卡片。
`Enter`	打开悬停卡片链接

上一篇表单 Form

下一篇标签 Label

在 GitHub 上编辑此页面

概览 Overview

指南 Guides

组件 Components

通用工具 Utilities

悬停卡片

Features