# 悬停卡片

为可见用户提供链接后方内容的预览。

## Features

- 可以受控或非受控。

- 可自定义侧边、对齐、偏移量和碰撞处理。

- 可选渲染指向箭头。

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

- 被屏幕阅读器忽略。

## [Anatomy](#anatomy)

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

```jsx
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-参考)

### [根部](#根部)

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

| 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` 属性控制悬停卡片打开的时间。

```jsx
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` 来支持这一点。使用它们来限制内容的尺寸。

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

```css
/* 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` 和任何碰撞的计算原点动画内容。

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

```css
/* 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` 属性。它们的值将在运行时更改以反映碰撞。使用它们来创建碰撞和方向感知的动画。

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

```css
/* 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` | 打开悬停卡片链接    |

<!--$-->

<!--/$-->