Dialog
メインコンテンツの上に重ねて表示するモーダルウィンドウ。フォーム・詳細表示・設定変更など、ページ遷移せずにサブタスクを完結させるときに使う。
インストール
npx shoji add dialog
プレビュー
パターン
Form Dialog
フォームを内包するダイアログの完成形。新規作成・編集フォームをページ遷移なしに表示するSaaSの定番パターン。
dialogformcreateedit
Detail Dialog
一覧から詳細を表示するダイアログ。タブ切り替えを内包することもある。クリックして詳細確認のパターン。
dialogdetailpreview
使い方
こんなときに使う
- ページ遷移せずにフォームを表示したいとき（新規作成・編集）
- 画像・動画のフルスクリーンプレビュー
- 設定変更・確認ステップなど一時的なサブタスク
使わないほうがいい場面
- ページ全体を置き換えるような大量のコンテンツ（ページ遷移を使う）
- モバイルで多用する（Drawer のほうがモバイルに適している）
- 連鎖してダイアログの上にダイアログを開く
JP 最適化のポイント
- フォーカストラップを実装 — Tab キーがダイアログ内を循環し、背後のコンテンツに誤ってフォーカスが移らない
- Esc キーで閉じられるように実装 — スクリーンリーダーユーザーや日本語入力中のユーザーも安全に操作できる