供有视觉能力的用户预览链接后面的内容。
<Text>
关注{" "}
<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">
用于构建高质量、可访问的 UI 的 React 组件、图标和颜色。
</Text>
</Box>
</Flex>
</HoverCard.Content>
</HoverCard.Root>{" "}
以获取更新。
</Text>
该组件继承了 Hover Card 基本组件 的属性。
包含悬停卡片的所有部分。
包装将打开悬停卡片的链接。
包含已打开的悬停卡片的内容。该组件基于 div 元素。
| Prop | Type | Default |
|---|---|---|
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 |
使用 size 属性来控制大小。
<Flex gap="4">
<HoverCard.Root>
<HoverCard.Trigger>
<Link href="#">大小 1</Link>
</HoverCard.Trigger>
<HoverCard.Content size="1" maxWidth="240px">
<Text as="div" size="1" trim="both">
<Strong>排版</Strong> 是组织文字以使书面语言在展示时可读、易读且吸引人的艺术与技巧。
</Text>
</HoverCard.Content>
</HoverCard.Root>
<HoverCard.Root>
<HoverCard.Trigger>
<Link href="#">大小 2</Link>
</HoverCard.Trigger>
<HoverCard.Content size="2" maxWidth="280px">
<Text as="div" size="2" trim="both">
<Strong>排版</Strong> 是组织文字以使书面语言在展示时可读、易读且吸引人的艺术与技巧。
</Text>
</HoverCard.Content>
</HoverCard.Root>
<HoverCard.Root>
<HoverCard.Trigger>
<Link href="#">大小 3</Link>
</HoverCard.Trigger>
<HoverCard.Content size="3" maxWidth="320px">
<Text as="div" size="3" trim="both">
<Strong>排版</Strong> 是组织文字以使书面语言在展示时可读、易读且吸引人的艺术与技巧。
</Text>
</HoverCard.Content>
</HoverCard.Root>
</Flex>
使用 Inset 组件将内容与悬停卡片的边缘对齐。
<Text>
技术革新了{" "}
<HoverCard.Root>
<HoverCard.Trigger>
<Link href="#">排版</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="粗体排版"
style={{
display: "block",
objectFit: "cover",
height: "100%",
width: 150,
backgroundColor: "var(--gray-5)",
}}
/>
</Inset>
</Box>
<Text size="2" as="p">
<Strong>排版</Strong> 是组织文字以使书面语言在展示时可读、易读且吸引人的艺术与技巧。文字的排列涉及选择字型、字体大小、行长度、行距（领先）和字间距（追踪）……
</Text>
</Flex>
</HoverCard.Content>
</HoverCard.Root>{" "}
在20世纪后期。
</Text>