Dialog
Dialogコンポーネントは、ダイアログボックス(もしくは単に「ダイアログ」)と呼ばれる、ページの前面に表示される領域のためのコンポーネントです。
ダイアログは、ユーザーに入力や選択などの操作を求めたり、情報を提示するために使われます。ユーザーの操作を起点として表示され、ユーザーの操作によって閉じられます。
Dialogを使用したコンポーネント
頻繁に利用するダイアログのパターンを、スタイリングやpropsを整えたコンポーネントとして用意しています。
ActionDialog
ユーザーに入力や選択などの操作を求めるためのダイアログです。ユーザーは操作内容をシステムに送信できます。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム(幕)で隠され、操作を受け付けません。
詳しい使い方は、ActionDialogを参照してください。
MessageDialog
ユーザーに情報を提示するためのダイアログです。
モーダルなダイアログです。ダイアログの表示中、ダイアログの裏側の領域はスクリム(幕)で隠され、操作を受け付けません。
詳しい使い方は、MessageDialogを参照してください。
ModelessDialog
モードレスなダイアログです。ダイアログを表示したまま、ダイアログの裏側の画面も操作できます。
基本的に、ダイアログと裏側の画面を同時並行で閲覧・操作する場合に使います。
詳しい使い方は、ModelessDialogを参照してください。
Props
width
string number
ダイアログの幅
firstFocusTarget
RefObject<HTMLElement>
ダイアログを開いた時にフォーカスする対象
ariaLabel
string
ダイアログの aria-label
ariaLabelledby
string
ダイアログの aria-labelledby
isOpen必須
false true
ダイアログを開いているかどうか
onPressEscape
() => void
エスケープキーを押下した時に発火するコールバック関数
onClickOverlay
() => void
オーバーレイをクリックした時に発火するコールバック関数
portalParent
HTMLElement RefObject<HTMLElement>
DOM 上でダイアログの要素を追加する親要素