ActionDialog
ユーザーに入力や選択などの操作を求めるためのダイアログです。ユーザーは操作内容をシステムに送信できます。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。
使用上の注意
モーダルなUIの使いどころもあわせて参照してください。
ダイアログを乱用しない
ActionDialogの表示中、ユーザーの操作範囲は強制的に制限されます。
ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。
複数のモーダルダイアログを同時に表示しない
モーダルダイアログ（ActionDialogやMessageDialog）を1つの操作で複数個表示したり、モーダルダイアログ上の操作によって2つ目のモーダルダイアログを表示したりすることは、原則として推奨されません。3つの画面が重なり、画面どうしの関係性や、どんな操作をすれば何が起こるのかが予測しづらくなるためです。
なお、モーダルダイアログ上の操作によってModelessDialogを表示したり、ModelessDialogが開いている状態でモーダルダイアログを開いたりすることは問題ありません。
レイアウト
基準サイズ
ダイアログの横幅サイズの基準値は以下のとおりです。
サイズに意図がない場合は、下記の値から想定に近い値を選択してください。
デスクトップ、タブレット（TABLET）
| サイズ | 値 | 補足説明 |
|---|---|---|
XS | 480px（30rem） | 幅の最小値として使います。 |
S | 560px（35rem） | |
M | 640px（40rem） | |
L | 880px（55rem） | |
XL | 1120px（70rem） | |
MAX | calc(100vw - 16px) | 幅の最大値として使います。 |
スマートフォン（SP）
スマートフォンは表示領域が狭いため、サイズの最大値/最小値は同じとします。
| サイズ | 値 | 補足説明 |
|---|---|---|
| 標準 | calc(100vw - 16px) | 幅の最大値/最小値として使います。 |
表示位置
top bottom left right propsで表示位置を指定できます。指定しない場合、画面の天地左右中央に表示されます。
- モーダルなダイアログ（
ActionDialogとMessageDialog）の場合、意図的な場合を除き位置を指定せず、天地左右中央とします。
アクセシビリティ
キーボード操作
ESCキーを押すことでダイアログを閉じることができます。
デザインパターン
削除操作をする際の確認のダイアログについては、削除ダイアログを参照してください。
それ以外のパターンについては、モーダルなUIを参照してください。
Props
ダイアログのタイトル
コンポーネント内の文言を変更するための関数を設定
@deprecated SectioningContent(Article, Aside, Nav, Section)でDialog全体をラップして、ダイアログタイトルのHeadingレベルを設定してください
ダイアログのサブタイトル
アクションボタンのラベル
アクションボタンのスタイル
アクションボタンを無効にするかどうか
閉じるボタンを無効にするかどうか
ダイアログフッターの左端操作領域
アクションボタンをクリックした時に発火するコールバック関数
@param closeDialog - ダイアログを閉じる関数
ダイアログを開いたときの初期 top 位置
ダイアログを開いたときの初期 bottom 位置
ダイアログを開いたときの初期 left 位置
ダイアログを開いたときの初期 right 位置
ダイアログの幅
ダイアログを開いた時にフォーカスする対象
ダイアログの aria-label
ダイアログの aria-labelledby
ダイアログを開いているかどうか
エスケープキーを押下した時に発火するコールバック関数
オーバーレイをクリックした時に発火するコールバック関数
DOM 上でダイアログの要素を追加する親要素