Radix Homepage
Radix Homepage
主题主题基础组件基础组件图标图标颜色颜色
文档案例博客
Components

悬停卡片

¥Hover Card

供视力正常的用户预览链接后的内容。

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

    Can be controlled or uncontrolled.

    Customize side, alignment, offsets, collision handling.

    Optionally render a pointing arrow.

    Supports custom open and close delays.

    Ignored by screen readers.

安装

¥Installation

从命令行安装组件。

¥Install the component from your command line.

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

结构

¥Anatomy

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

¥Import all parts and piece them together.

import { HoverCard } from "radix-ui";



export default () => (

	<HoverCard.Root>

		<HoverCard.Trigger />

		<HoverCard.Portal>

			<HoverCard.Content>

				<HoverCard.Arrow />

			</HoverCard.Content>

		</HoverCard.Portal>

	</HoverCard.Root>

);

API 参考

¥API Reference

根

¥Root

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

¥Contains all the parts of a hover card.

PropTypeDefault
defaultOpen
boolean
No default value
open
boolean
No default value
onOpenChange
function
No default value
openDelay
number
700
closeDelay
number
300

触发器

¥Trigger

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

¥The link that opens the hover card when hovered.

PropTypeDefault
asChild
boolean
false
Data attributeValues
[data-state]"open" | "closed"

门户

¥Portal

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

¥When used, portals the content part into the body.

PropTypeDefault
forceMount
boolean
No default value
container
HTMLElement
document.body

内容

¥Content

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

¥The component that pops out when the hover card is open.

PropTypeDefault
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 attributeValues
[data-state]"open" | "closed"
[data-side]"left" | "right" | "bottom" | "top"
[data-align]"start" | "end" | "center"
CSS VariableDescription
--radix-hover-card-content-transform-originThe transform-origin computed from the content and arrow positions/offsets
--radix-hover-card-content-available-widthThe remaining width between the trigger and the boundary edge
--radix-hover-card-content-available-heightThe remaining height between the trigger and the boundary edge
--radix-hover-card-trigger-widthThe width of the trigger
--radix-hover-card-trigger-heightThe height of the trigger

箭头

¥Arrow

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

¥An optional arrow element to render alongside the hover card. This can be used to help visually link the trigger with the HoverCard.Content. Must be rendered inside HoverCard.Content.

PropTypeDefault
asChild
boolean
false
width
number
10
height
number
5

示例

¥Examples

立即显示

¥Show instantly

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

¥Use the openDelay prop to control the time it takes for the hover card to open.

import { HoverCard } from "radix-ui";



export default () => (

	<HoverCard.Root openDelay={0}>

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

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

	</HoverCard.Root>

);

限制内容大小

¥Constrain the content size

你可能需要限制内容的宽度，使其与触发器的宽度匹配。你可能还需要限制其高度，使其不超过视口。

¥You may want to constrain the width of the content so that it matches the trigger width. You may also want to constrain its height to not exceed the viewport.

为了支持此功能，我们公开了几个 CSS 自定义属性，例如 --radix-hover-card-trigger-width 和 --radix-hover-card-content-available-height。使用它们来限制内容尺寸。

¥We expose several CSS custom properties such as --radix-hover-card-trigger-width and --radix-hover-card-content-available-height to support this. Use them to constrain the content dimensions.

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

}

原点感知动画

¥Origin-aware animations

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

¥We expose a CSS custom property --radix-hover-card-content-transform-origin. Use it to animate the content from its computed origin based on side, sideOffset, align, alignOffset and any collisions.

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

	}

}

碰撞感知动画

¥Collision-aware animations

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

¥We expose data-side and data-align attributes. Their values will change at runtime to reflect collisions. Use them to create collision and direction-aware animations.

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

	}

}

可访问性

¥Accessibility

悬停卡片仅供视力正常的用户使用，键盘用户将无法访问内容。

¥The hover card is intended for sighted users only, the content will be inaccessible to keyboard users.

键盘交互

¥Keyboard Interactions

KeyDescription
Tab
Opens/closes the hover card.
Enter
Opens the hover card link
Previous表单
Next标签