Dialog

ページ前面に表示されるダイアログ領域のプリミティブコンポーネントです。ActionDialog/MessageDialog/ModelessDialog/FormDialog/StepFormDialogで実現できない独自のダイアログを提供するときに使います。

ダイアログは、ユーザーに入力や選択などの操作を求めたり、情報を提示するために使われます。ユーザーの操作を起点として表示され、ユーザーの操作によって閉じられます。

Dialogを使用したコンポーネント

頻繁に利用するダイアログのパターンを、スタイリングやpropsを整えたコンポーネントとして用意しています。

ActionDialog、FormDialog

ユーザーに入力や選択などの操作を求めるためのダイアログです。ユーザーは操作内容をシステムに送信できます。 ダイアログコンテンツにフォームが含まれている場合は、FormDialogを使用できます。

モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。

詳しい使い方は、ActionDialog、FormDialogを参照してください。

MessageDialog

ユーザーに情報を提示するためのダイアログです。

モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。

詳しい使い方は、MessageDialogを参照してください。

ModelessDialog

モードレスなダイアログです。ダイアログを表示したまま、ダイアログの裏側の画面も操作できます。

基本的に、ダイアログと裏側の画面を同時並行で閲覧・操作する場合に使います。

詳しい使い方は、ModelessDialogを参照してください。

StepFormDialog

ステップを複数に分けたダイアログです。タスクの完了に複数の操作が必要な場合に使います。

モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム（幕）で隠され、操作を受け付けません。

詳しい使い方は、StepFormDialogを参照してください。

使い方チェックリスト

Dialog

参照元：Dialogを使用したコンポーネント > ActionDialog、FormDialog 「Dialogを使用したコンポーネント > ActionDialog、FormDialog」の本文へ移動

• Should

  ユーザーに入力や選択などの操作を求める場合は ActionDialog / FormDialog を使う
• Should

  ダイアログコンテンツにフォームが含まれている場合は FormDialog を使う

参照元：Dialogを使用したコンポーネント > MessageDialog 「Dialogを使用したコンポーネント > MessageDialog」の本文へ移動

• Should

  ユーザーに情報を提示する場合は MessageDialog を使う

参照元：Dialogを使用したコンポーネント > ModelessDialog 「Dialogを使用したコンポーネント > ModelessDialog」の本文へ移動

• Should

  ダイアログと裏側の画面を同時並行で閲覧・操作する場合は ModelessDialog を使う

参照元：Dialogを使用したコンポーネント > StepFormDialog 「Dialogを使用したコンポーネント > StepFormDialog」の本文へ移動

• Should

  タスクの完了に複数の操作が必要な場合は StepFormDialog を使う

Props

Dialog props

DialogWrapper props

Propsは設定されていません。

DialogTrigger props

Propsは設定されていません。

DialogContent props

DialogCloser props

Propsは設定されていません。