Tinyrack

AlertDialog

破壊的または取り消せない操作を確認するモーダルサーフェスです。

主なプロパティ

この Tinyrack ラッパーは、Base UI の動作、React 19 の ref、ネイティブプロパティ、イベント、render コントラクトを維持します。プレイグラウンドでは label と disabled を操作できます。open はコンポーネントのイベントと同期するプレビュー側の操作状態として管理され、リセットすると初期状態と結果に戻ります。

インストール

pnpm add @tinyrack/ui

長い行はコード領域を横にスクロールして確認できます。

スタイル

@import '@tinyrack/ui/components/alert-dialog.css';

長い行はコード領域を横にスクロールして確認できます。

インポート

import { TRAlertDialog } from '@tinyrack/ui/components/alert-dialog';

長い行はコード領域を横にスクロールして確認できます。

プレイグラウンド

使用方法

破壊的操作の確認 パーマリンク

最初の操作には、破壊的でない「キャンセル」を配置します。「確認」を選ぶとダイアログが閉じ、ライブ結果が更新されます。

例

状態の比較 パーマリンク

破壊的操作の確認ダイアログを開き、Escape キーまたは「キャンセル」を押した後に「ラックを削除」へフォーカスが戻ることを確認します。無効状態の例ではダイアログは開きません。

API

構造は Root、Trigger、Portal、Backdrop、Viewport、Popup、Title、Description、Close です。すべてのパートとプロパティ・状態型は @tinyrack/ui/components/alert-dialog からエクスポートされます。スタイルは対応する CSS サブパスを明示的に読み込んだ場合だけ適用されます。

Root は常にモーダルです。開いている間はフォーカスが内部に留まり、Escape キーと Close は閉じる操作を要求しますが、外側の操作では閉じません。閉じた後はフォーカスが Trigger に戻ります。最初の Close には安全なキャンセル操作を配置し、破壊的な処理は危険な操作を確認する Close だけに接続してください。無効な Trigger と Close は動作しません。

Root の外にトリガーを置く場合は、TRAlertDialog.createHandle<Payload>() で型付きの橋渡しを作成します。Trigger と Root の両方にハンドルを、Trigger にペイロードを渡してください。Portal にはカスタムコンテナーを指定できます。確認コントロールを tr-alert-dialog-actions にまとめると、狭いビューポートでも読みやすいアクション行に折り返されます。