ホバーカード

視覚を持つユーザーがリンクの背後にあるコンテンツをプレビューするため。

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`
`幅`	`数値`	`10`
`高さ`	`数値`	`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>
);

コンテンツサイズの制限

トリガーの幅に合わせてコンテンツの幅を制限したい場合があります。また、ビューポートを超えないように高さを制限したい場合もあります。

これをサポートするために、--radix-hover-card-trigger-widthや--radix-hover-card-content-available-heightなどのいくつかのCSSカスタムプロパティを公開しています。これらを使用して、コンテンツのサイズを制限します。

// 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でこのページを編集します。

概要

ガイド

コンポーネント

ユーティリティ

機能