Dialog
5 種類の配置に対応するフォーカストラップ付きダイアログサーフェスです。
主なプロパティ
| プロパティ | 値 | 既定値 |
|---|---|---|
Popup の placement | middle、top、bottom、start、end | middle |
Root の modal | true の場合はフォーカストラップとスクロールロック | true |
| 状態 | open で制御、または defaultOpen で非制御 | 閉じた状態 |
インストール
pnpm add @tinyrack/ui長い行はコード領域を横にスクロールして確認できます。
スタイル
@import '@tinyrack/ui/components/dialog.css';長い行はコード領域を横にスクロールして確認できます。
インポート
import { TRDialog } from '@tinyrack/ui/components/dialog';長い行はコード領域を横にスクロールして確認できます。
プレイグラウンド
使用方法
例
配置 パーマリンク
同じ複合構造を使い、ポップアップの配置だけを変更します。
分離したトリガーとハンドル パーマリンク
安定したハンドルが、共通の祖先要素を持たない Trigger と Root を接続します。Viewport はモバイル表示でコンテンツを表示領域内に収めます。
フォームを含む長いモーダルタスク パーマリンク
モーダルは、開いている間フォーカスを内部に留め、長いコンテンツをビューポート内に収めます。実際のフォームを送信し、閉じた後は「ダイアログを開く」へフォーカスを戻します。
API
Base UI はフォーカストラップ、スクロールロック、ポータル、背景操作、フォーカス復元、Escape キーによる終了を担当します。Popup はすべての配置で同じレスポンシブ幅ルールを使用します。長いタスクの内容は Description とアクション行の間にある tr-dialog-body コンテナーへ配置してください。ポップアップの minmax(0, 1fr) を適用した本文だけがスクロールし、タイトルとアクションは表示されたままになります。
| 公開 API | 用途 |
|---|---|
TRDialog.Root / TRDialogRoot | 制御付きの open、非制御の defaultOpen、モーダル動作、終了、任意のハンドルペイロード状態を管理します。 |
TRDialog.Trigger / TRDialogTrigger | ルートを開くか、ハンドルと任意のペイロードを使って分離されたルートを開きます。 |
TRDialog.Portal / TRDialogPortal | レイヤーを document.body または指定した container へ移動します。 |
TRDialog.Backdrop / TRDialogBackdrop | モーダル背景と外側を押すターゲットを提供します。 |
TRDialog.Viewport / TRDialogViewport | 長い内容とモバイルのダイアログレイアウトを収めます。 |
TRDialog.Popup / TRDialogPopup | 名前付きの dialog を描画し、initialFocus、finalFocus、Tinyrack の placement を受け取ります。 |
TRDialog.Title / TRDialogTitle | アクセシブルな名前を提供します。 |
TRDialog.Description / TRDialogDescription | アクセシブルな説明を提供します。 |
TRDialog.Close / TRDialogClose | アクティブなダイアログを閉じてフォーカスを復元します。 |
TRDialog.createHandle, createDialogHandle, TRDialogHandle<Payload> | 分離されたトリガー、命令的な開閉、型付きペイロードを接続します。 |
外側の操作を維持する場合は modal={false}、スクロールをロックせずフォーカスだけを閉じ込める場合は modal="trap-focus" を使います。disablePointerDismissal は外側を押してもダイアログが閉じないようにします。すべてのパートは ref、render、イベントハンドラー、クラス、スタイル、ネイティブ属性を保持します。閉じたポータルは SSR でも安全で、初期表示されたポータルも公開構造を変えずにハイドレートされます。