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 上でダイアログの要素を追加する親要素