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

悬停卡片

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

View sourceReport an issueView in Playground
Follow @radix_ui for updates.
<Text>

	Follow{" "}

	<HoverCard.Root>

		<HoverCard.Trigger>

			<Link href="https://twitter.com/radix_ui" target="_blank">

				@radix_ui

			</Link>

		</HoverCard.Trigger>

		<HoverCard.Content maxWidth="300px">

			<Flex gap="4">

				<Avatar
					size="3"
					fallback="R"
					radius="full"
					src="https://pbs.twimg.com/profile_images/1337055608613253126/r_eiMp2H_400x400.png"
				/>

				<Box>

					<Heading size="3" as="h3">

						Radix

					</Heading>

					<Text as="div" size="2" color="gray" mb="2">

						@radix_ui

					</Text>

					<Text as="div" size="2">

						React components, icons, and colors for building high-quality,

						accessible UI.

					</Text>

				</Box>

			</Flex>

		</HoverCard.Content>

	</HoverCard.Root>{" "}

	for updates.

</Text>

API 参考

¥API Reference

此组件继承了 悬停卡片基础组件 的属性。

¥This component inherits props from the Hover Card primitive.

根

¥Root

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

¥Contains all the parts of the hover card.

触发器

¥Trigger

封装用于打开悬停卡片的链接。

¥Wraps the link that will open the hover card.

内容

¥Content

包含打开的悬停卡片的内容。此组件基于 div 元素。

¥Contains the content of the open hover card. This component is based on the div element.

PropTypeDefault
asChild
boolean
No default value
size
Responsive<"1" | "2" | "3">
"2"
width
Responsive<string>
No default value
minWidth
Responsive<string>
No default value
maxWidth
Responsive<string>
"480px"
height
Responsive<string>
No default value
minHeight
Responsive<string>
No default value
maxHeight
Responsive<string>
No default value

示例

¥Examples

尺寸

¥Size

使用 size 属性控制大小。

¥Use the size prop to control the size.

<Flex gap="4">

	<HoverCard.Root>

		<HoverCard.Trigger>

			<Link href="#">Size 1</Link>

		</HoverCard.Trigger>

		<HoverCard.Content size="1" maxWidth="240px">

			<Text as="div" size="1" trim="both">

				<Strong>Typography</Strong> is the art and technique of arranging type

				to make written language legible, readable and appealing when displayed.

			</Text>

		</HoverCard.Content>

	</HoverCard.Root>



	<HoverCard.Root>

		<HoverCard.Trigger>

			<Link href="#">Size 2</Link>

		</HoverCard.Trigger>

		<HoverCard.Content size="2" maxWidth="280px">

			<Text as="div" size="2" trim="both">

				<Strong>Typography</Strong> is the art and technique of arranging type

				to make written language legible, readable and appealing when displayed.

			</Text>

		</HoverCard.Content>

	</HoverCard.Root>



	<HoverCard.Root>

		<HoverCard.Trigger>

			<Link href="#">Size 3</Link>

		</HoverCard.Trigger>

		<HoverCard.Content size="3" maxWidth="320px">

			<Text as="div" size="3" trim="both">

				<Strong>Typography</Strong> is the art and technique of arranging type

				to make written language legible, readable and appealing when displayed.

			</Text>

		</HoverCard.Content>

	</HoverCard.Root>

</Flex>

使用插入内容

¥With inset content

使用 插入 组件将内容与悬停卡片边缘对齐。

¥Use the Inset component to align content flush with the sides of the hover card.

Technology revolutionized typography in the latter twentieth century.
<Text>

	Technology revolutionized{" "}

	<HoverCard.Root>

		<HoverCard.Trigger>

			<Link href="#">typography</Link>

		</HoverCard.Trigger>



		<HoverCard.Content width="450px">

			<Flex>

				<Box asChild flexShrink="0">

					<Inset side="left" pr="current">

						<img
							src="https://images.unsplash.com/photo-1617050318658-a9a3175e34cb?&auto=format&fit=crop&w=300&q=90"
							alt="Bold typography"
							style={{
								display: "block",
								objectFit: "cover",
								height: "100%",
								width: 150,
								backgroundColor: "var(--gray-5)",
							}}
						/>

					</Inset>

				</Box>



				<Text size="2" as="p">

					<Strong>Typography</Strong> is the art and technique of arranging type

					to make written language legible, readable and appealing when

					displayed. The arrangement of type involves selecting typefaces, point

					sizes, line lengths, line-spacing (leading), and letter-spacing

					(tracking)…

				</Text>

			</Flex>

		</HoverCard.Content>

	</HoverCard.Root>{" "}

	in the latter twentieth century.

</Text>
Previous下拉菜单
Next图标按钮