概要

はじめに

アクセシビリティ

リリース

ガイド

コンポーネント

（アコーディオンからツールチップまでのコンポーネントリスト。以下はアラートダイアログの部分のみ翻訳）

アラートダイアログ

（…以降のコンポーネントリスト）

ユーティリティ

（Accessible Icon から Visually Hidden までのユーティリティリスト）

アラートダイアログ

重要なコンテンツでユーザーを中断し、応答を期待するモーダルダイアログ。

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';
import './styles.css';

const AlertDialogDemo = () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger asChild>
      <button className="Button violet">Delete account</button>
    </AlertDialog.Trigger>
    <AlertDialog.Portal>
      <AlertDialog.Overlay className="AlertDialogOverlay" />
      <AlertDialog.Content className="AlertDialogContent">
        <AlertDialog.Title className="AlertDialogTitle">Are you absolutely sure?</AlertDialog.Title>
        <AlertDialog.Description className="AlertDialogDescription">
          This action cannot be undone. This will permanently delete your account and remove your
          data from our servers.
        </AlertDialog.Description>
        <div style={{ display: 'flex', gap: 25, justifyContent: 'flex-end' }}>
          <AlertDialog.Cancel asChild>
            <button className="Button mauve">Cancel</button>
          </AlertDialog.Cancel>
          <AlertDialog.Action asChild>
            <button className="Button red">Yes, delete account</button>
          </AlertDialog.Action>
        </div>
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

export default AlertDialogDemo;

特徴

フォーカスは自動的にトラップされます。

制御することも非制御にすることもできます。

スクリーンリーダーのアナウンスを `Title` と `Description` コンポーネントで管理します。

Escキーでコンポーネントが自動的に閉じます。

インストール

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

npm install @radix-ui/react-alert-dialog

構造

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

import * as AlertDialog from '@radix-ui/react-alert-dialog';

export default () => (
  <AlertDialog.Root>
    <AlertDialog.Trigger />
    <AlertDialog.Portal>
      <AlertDialog.Overlay />
      <AlertDialog.Content>
        <AlertDialog.Title />
        <AlertDialog.Description />
        <AlertDialog.Cancel />
        <AlertDialog.Action />
      </AlertDialog.Content>
    </AlertDialog.Portal>
  </AlertDialog.Root>
);

APIリファレンス

ルート

アラートダイアログのすべてのパーツが含まれています。

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

トリガー

ダイアログを開くボタン。

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

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

ポータル

使用すると、オーバーレイとコンテンツのパーツが `body` にポータルされます。

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

オーバーレイ

ダイアログが開いているときに、ビューの非アクティブな部分を覆うレイヤー。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし

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

コンテンツ

ダイアログが開いているときにレンダリングされるコンテンツが含まれています。

プロパティ	型	デフォルト
`asChild`	`boolean`	`false`
`forceMount`	`boolean`	デフォルト値なし
`onOpenAutoFocus`	`function`	デフォルト値なし
`onCloseAutoFocus`	`function`	デフォルト値なし
`onEscapeKeyDown`	`function`	デフォルト値なし

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

キャンセル

ダイアログを閉じるボタン。このボタンは、`AlertDialog.Action` ボタンと視覚的に区別する必要があります。

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

アクション

ダイアログを閉じるボタン。これらのボタンは、`AlertDialog.Cancel` ボタンと視覚的に区別する必要があります。

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

タイトル

ダイアログが開いたときにアナウンスされるアクセシブルな名前。代わりに、`aria-label` または `aria-labelledby` を `AlertDialog.Content` に指定して、このコンポーネントを除外することもできます。

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

説明

ダイアログが開いたときにアナウンスされるアクセシブルな説明。代わりに、`aria-describedby` を `AlertDialog.Content` に指定して、このコンポーネントを除外することもできます。

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

例

非同期フォーム送信後に閉じる

制御されたプロパティを使用して、非同期操作の完了後にアラートダイアログをプログラムで閉じます。

import React from 'react';
import * as AlertDialog from '@radix-ui/react-alert-dialog';

const wait = () => new Promise((resolve) => setTimeout(resolve, 1000));

export default () => {
  const [open, setOpen] = React.useState(false);

  return (
    <AlertDialog.Root open={open} onOpenChange={setOpen}>
      <AlertDialog.Trigger>Open</AlertDialog.Trigger>
      <AlertDialog.Portal>
        <AlertDialog.Overlay />
        <AlertDialog.Content>
          <form
            onSubmit={(event) => {
              wait().then(() => setOpen(false));
              event.preventDefault();
            }}
          >
            {/** some inputs */}
            <button type="submit">Submit</button>
          </form>
        </AlertDialog.Content>
      </AlertDialog.Portal>
    </AlertDialog.Root>
  );
};

カスタムポータルコンテナ

アラートダイアログがポータルされる要素をカスタマイズします。

export default () => {
  const [container, setContainer] = React.useState(null);
  return (
    <div>
      <AlertDialog.Root>
        <AlertDialog.Trigger />
        <AlertDialog.Portal container={container}>
          <AlertDialog.Overlay />
          <AlertDialog.Content>...</AlertDialog.Content>
        </AlertDialog.Portal>
      </AlertDialog.Root>

      <div ref={setContainer} />
    </div>
  );
};

アクセシビリティ

アラートおよびメッセージダイアログのWAI-ARIAデザインパターンに準拠しています。

キーボード操作

キー	説明
`スペース`	ダイアログを開閉します。
`Enter`	ダイアログを開閉します。
`Tab`	フォーカスを次のフォーカス可能な要素に移動します。
`Shift + Tab`	フォーカスを前のフォーカス可能な要素に移動します。
`Esc`	ダイアログを閉じ、フォーカスを`AlertDialog.Trigger`に移動します。

前へアコーディオン

次へアスペクト比

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