ポップオーバー – Radix Primitives

概要

はじめに

アクセシビリティ

リリース

ガイド

コンポーネント

（アコーディオンからツールチップまでのコンポーネントリスト。以下同様の翻訳を適用）

ユーティリティ

（Accessible Icon から Visually Hidden までのユーティリティリスト。以下同様の翻訳を適用）

ボタンによってトリガーされ、ポータルにリッチコンテンツを表示します。

import React from 'react';
import * as Popover from '@radix-ui/react-popover';
import { MixerHorizontalIcon, Cross2Icon } from '@radix-ui/react-icons';
import './styles.css';

const PopoverDemo = () => (
  <Popover.Root>
    <Popover.Trigger asChild>
      <button className="IconButton" aria-label="Update dimensions">
        <MixerHorizontalIcon />
      </button>
    </Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent" sideOffset={5}>
        <div style={{ display: 'flex', flexDirection: 'column', gap: 10 }}>
          <p className="Text" style={{ marginBottom: 10 }}>
            Dimensions
          </p>
          <fieldset className="Fieldset">
            <label className="Label" htmlFor="width">
              Width
            </label>
            <input className="Input" id="width" defaultValue="100%" />
          </fieldset>
          <fieldset className="Fieldset">
            <label className="Label" htmlFor="maxWidth">
              Max. width
            </label>
            <input className="Input" id="maxWidth" defaultValue="300px" />
          </fieldset>
          <fieldset className="Fieldset">
            <label className="Label" htmlFor="height">
              Height
            </label>
            <input className="Input" id="height" defaultValue="25px" />
          </fieldset>
          <fieldset className="Fieldset">
            <label className="Label" htmlFor="maxHeight">
              Max. height
            </label>
            <input className="Input" id="maxHeight" defaultValue="none" />
          </fieldset>
        </div>
        <Popover.Close className="PopoverClose" aria-label="Close">
          <Cross2Icon />
        </Popover.Close>
        <Popover.Arrow className="PopoverArrow" />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

export default PopoverDemo;

特徴

制御または非制御が可能です。

側面、配置、オフセット、衝突処理をカスタマイズできます。

オプションで矢印を表示できます。

フォーカスは完全に管理され、カスタマイズ可能です。

モーダルモードと非モーダルモードをサポートします。

非表示とレイヤーの動作は高度にカスタマイズ可能です。

インストール

コマンドラインからコンポーネントをインストールします。

npm install @radix-ui/react-popover

構造

すべてのパーツをインポートして組み立てます。

import * as Popover from '@radix-ui/react-popover';

export default () => (
  <Popover.Root>
    <Popover.Trigger />
    <Popover.Anchor />
    <Popover.Portal>
      <Popover.Content>
        <Popover.Close />
        <Popover.Arrow />
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

APIリファレンス

ルート

ポップオーバーのすべてのパーツが含まれています。

プロパティ	型	デフォルト
`defaultOpen`	`boolean`	デフォルト値なし
`open`	`boolean`	デフォルト値なし
`onOpenChange`	`function`	デフォルト値なし
`modal`	`boolean`	`false`

トリガー

ポップオーバーを切り替えるボタンです。デフォルトでは、Popover.Content はトリガーに対して自身を配置します。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`

アンカー

Popover.Content を配置するためのオプションの要素です。このパーツを使用しない場合、コンテンツは Popover.Trigger に沿って配置されます。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`

ポータル

使用すると、コンテンツ部分を body にポータルします。

プロパティ	型	デフォルト
`forceMount`	`boolean`	デフォルト値なし
`container`	`HTMLElement`	`document.body`

コンテンツ

ポップオーバーが開いたときにポップアウトするコンポーネントです。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`onOpenAutoFocus`	`function`	デフォルト値なし
`onCloseAutoFocus`	`function`	デフォルト値なし
`onEscapeKeyDown`	`function`	デフォルト値なし
`onPointerDownOutside`	`function`	デフォルト値なし
`onFocusOutside`	`function`	デフォルト値なし
`onInteractOutside`	`function`	デフォルト値なし
`forceMount`	`boolean`	デフォルト値なし
`side`	`enum`	`"bottom"`
`sideOffset`	`number`	`0`
`align`	`enum`	`"center"`
`alignOffset`	`number`	`0`
`avoidCollisions`	`boolean`	`true`
`collisionBoundary`	`境界`	`[]`
`collisionPadding`	`number \| Padding`	`0`
`arrowPadding`	`number`	`0`
`sticky`	`enum`	`"partial"`
`hideWhenDetached`	`boolean`	`false`

データ属性	値
`[data-state]`	`"open" \|"closed"`
`[data-side]`	`"left" \|"right" \|"bottom" \|"top"`
`[data-align]`	`"start" \|"end" \|"center"`

CSS変数	説明
`--radix-popover-content-transform-origin`	コンテンツと矢印の位置/オフセットから計算された `transform-origin`
`--radix-popover-content-available-width`	トリガーと境界線の端の間の残りの幅
`--radix-popover-content-available-height`	トリガーと境界線の端の間の残りの高さ
`--radix-popover-trigger-width`	トリガーの幅
`--radix-popover-trigger-height`	トリガーの高さ

矢印

ポップオーバーと一緒にレンダリングするオプションの矢印要素。アンカーと Popover.Content を視覚的にリンクするために使用できます。Popover.Content 内にレンダリングする必要があります。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`幅`	`number`	`10`
`高さ`	`number`	`5`

閉じる

開いているポップオーバーを閉じるボタンです。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`

例

コンテンツサイズを制限する

コンテンツの幅がトリガーの幅と一致するように制約することをお勧めします。また、高さがビューポートを超えないように制約することもお勧めします。

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

// index.jsx
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

export default () => (
  <Popover.Root>
    <Popover.Trigger>…</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent" sideOffset={5}>
        …
      </Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

/* styles.css */
.PopoverContent {
  width: var(--radix-popover-trigger-width);
  max-height: var(--radix-popover-content-available-height);
}

起点認識アニメーション

CSS カスタムプロパティ --radix-popover-content-transform-origin を公開しています。これを使用して、side、sideOffset、align、alignOffset、および衝突に基づいて計算された起点からコンテンツをアニメーション化します。

// index.jsx
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

export default () => (
  <Popover.Root>
    <Popover.Trigger>…</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent">…</Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

/* styles.css */
.PopoverContent {
  transform-origin: var(--radix-popover-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 Popover from '@radix-ui/react-popover';
import './styles.css';

export default () => (
  <Popover.Root>
    <Popover.Trigger>…</Popover.Trigger>
    <Popover.Portal>
      <Popover.Content className="PopoverContent">…</Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

/* styles.css */
.PopoverContent {
  animation-duration: 0.6s;
  animation-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}
.PopoverContent[data-side='top'] {
  animation-name: slideUp;
}
.PopoverContent[data-side='bottom'] {
  animation-name: slideDown;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

カスタムアンカーを使用する場合

トリガーをアンカーとして使用したくない場合は、コンテンツを別の要素にアンカーすることができます。

// index.jsx
import * as Popover from '@radix-ui/react-popover';
import './styles.css';

export default () => (
  <Popover.Root>
    <Popover.Anchor asChild>
      <div className="Row">
        Row as anchor <Popover.Trigger>Trigger</Popover.Trigger>
      </div>
    </Popover.Anchor>

    <Popover.Portal>
      <Popover.Content>…</Popover.Content>
    </Popover.Portal>
  </Popover.Root>
);

/* styles.css */
.Row {
  background-color: gainsboro;
  padding: 20px;
}

アクセシビリティ

ダイアログ WAI-ARIA デザインパターンに準拠しています。

キーボード操作

キー	説明
`スペース`	ポップオーバーを開閉します。
`Enter`	ポップオーバーを開閉します。
`Tab`	フォーカスを次のフォーカス可能な要素に移動します
`Shift + Tab`	フォーカスを前のフォーカス可能な要素に移動します
`Esc`	ポップオーバーを閉じ、フォーカスを `Popover.Trigger` に移動します。

カスタム API

プリミティブな部分を独自のコンポーネントに抽象化することで、独自の API を作成します。

矢印を抽象化し、デフォルト設定を設定する

この例では、Popover.Arrow 部分を抽象化し、デフォルトの sideOffset 設定を設定しています。

使用方法

import { Popover, PopoverTrigger, PopoverContent } from './your-popover';

export default () => (
  <Popover>
    <PopoverTrigger>Popover trigger</PopoverTrigger>
    <PopoverContent>Popover content</PopoverContent>
  </Popover>
);

実装

// your-popover.jsx
import React from 'react';
import * as PopoverPrimitive from '@radix-ui/react-popover';

export const Popover = PopoverPrimitive.Root;
export const PopoverTrigger = PopoverPrimitive.Trigger;

export const PopoverContent = React.forwardRef(
  ({ children, ...props }, forwardedRef) => (
    <PopoverPrimitive.Portal>
      <PopoverPrimitive.Content sideOffset={5} {...props} ref={forwardedRef}>
        {children}
        <PopoverPrimitive.Arrow />
      </PopoverPrimitive.Content>
    </PopoverPrimitive.Portal>
  )
);

前へナビゲーションメニュー

次へ進捗

GitHub でこのページを編集する。