# 悬停卡片

供有视觉能力的用户预览链接后面的内容。

```jsx
<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>
```

## [API 参考](#api-参考)

该组件继承了 [Hover Card 基本组件](/primitives/docs/components/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` 属性来控制大小。

```jsx
<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](/themes/docs/components/inset) 组件将内容与悬停卡片的边缘对齐。

```jsx
<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>
```

<!--$-->

<!--/$-->