悬停卡片

用于有视力的用户预览链接后面的内容。

import React from 'react';
import * as HoverCard from '@radix-ui/react-hover-card';
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;

功能

可以是受控的或非受控的。

自定义侧面、对齐方式、偏移量、碰撞处理。

可以选择性地渲染指向箭头。

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

被屏幕阅读器忽略。

安装

从命令行安装组件。

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

解剖结构

导入所有部分并将它们拼凑在一起。

import * as HoverCard from '@radix-ui/react-hover-card';

export default () => (
  <HoverCard.Root>
    <HoverCard.Trigger />
    <HoverCard.Portal>
      <HoverCard.Content>
        <HoverCard.Arrow />
      </HoverCard.Content>
    </HoverCard.Portal>
  </HoverCard.Root>
);

API 参考

根

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

属性	类型	默认值
`defaultOpen`	`布尔值`	没有默认值
`open`	`布尔值`	没有默认值
`onOpenChange`	`函数`	没有默认值
`openDelay`	`数字`	`700`
`closeDelay`	`数字`	`300`

触发器

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

属性	类型	默认值
`asChild`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`

传送门

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

属性	类型	默认值
`forceMount`	`布尔值`	没有默认值
`container`	`HTMLElement`	`document.body`

内容

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

属性	类型	默认值
`asChild`	`布尔值`	`false`
`forceMount`	`布尔值`	没有默认值
`side`	`枚举`	`"bottom"`
`sideOffset`	`数字`	`0`
`align`	`枚举`	`"center"`
`alignOffset`	`数字`	`0`
`avoidCollisions`	`布尔值`	`true`
`collisionBoundary`	`边界`	`[]`
`collisionPadding`	`数字 \| 填充`	`0`
`arrowPadding`	`数字`	`0`
`sticky`	`枚举`	`"partial"`
`hideWhenDetached`	`布尔值`	`false`

数据属性	值
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`

CSS 变量	描述
`--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 内部。

属性	类型	默认值
`asChild`	`布尔值`	`false`
`width`	`数字`	`10`
`height`	`数字`	`5`

示例

立即显示

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

import * as HoverCard from '@radix-ui/react-hover-card';

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 来支持此功能。使用它们来约束内容尺寸。

// index.jsx
import * as HoverCard from '@radix-ui/react-hover-card';
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);
}

源感知动画

我们暴露了一个 CSS 自定义属性 --radix-hover-card-content-transform-origin。使用它根据 side、sideOffset、align、alignOffset 和任何冲突，从其计算的原点动画内容。

// index.jsx
import * as HoverCard from '@radix-ui/react-hover-card';
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);
  }
}

碰撞感知动画

我们暴露了 data-side 和 data-align 属性。它们的取值会在运行时发生变化，以反映冲突。使用它们来创建碰撞和方向感知动画。

// index.jsx
import * as HoverCard from '@radix-ui/react-hover-card';
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);
  }
}

可访问性

悬停卡仅供视力正常用户使用，内容对键盘用户不可访问。

键盘交互

键	描述
`Tab`	打开/关闭悬停卡。
`Enter`	打开悬停卡链接

上一个表单

下一个标签

在 GitHub 上编辑此页面。

概述

指南

组件

工具

功能

安装