ModelessDialog

背面の画面操作を妨げないモードレスダイアログコンポーネントです。ダイアログと背面の画面を同時並行で閲覧・操作するときに使います。

使用上の注意

ダイアログを乱用しない

ModelessDialogは、ユーザーが直前まで見ていた画面の一部を覆い隠します。

ダイアログが表示されることによってユーザーの操作を妨げてしまわないか、ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し、使用を検討してください。

レイアウト

基準サイズ

SmartHR UIでは、ダイアログの横幅をサイズ（sizeprops）で指定できます。各サイズの基準値は幅のセマンティックトークンを参照しています。

大きさ	幅トークン	値（px）
`XS`	`col3`	424px
`S`	`col4`	576px
`M`	`col5`	728px
`L`	`col6`	880px
`XL`	`col7`	1032px
`XXL`	`col8`	1184px
`FULL`	-	`width: 100%`

`XS`

入力要素を1つだけ持つダイアログなど、内容が極めて少ないダイアログに使います。

`S`

要素が少なく、要素が垂直方向に並ぶ、広い横幅を必要としないダイアログに使います。

`M`

数行に渡るテキストを表示したり、水平方向に要素を並べて表示したりする標準的なダイアログに使います。

`L`

テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。

`XL`

テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。Lではどうしてもコンテンツが収まりきらない場合に使います。

`XXL`

テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。XLではどうしてもコンテンツが収まりきらない場合に使います。

`FULL`

テーブルを表示したり、ダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログに使います。XXLではどうしてもコンテンツが収まりきらない場合に使います。

表示位置

top bottom left right propsで表示位置を指定できます。指定しない場合、画面の上下左右中央に表示されます。

ModelessDialogの場合は、ダイアログを開く操作をした箇所の付近に表示します。
- モーダルなダイアログと違って、ダイアログの裏側の画面がスクリム（幕）で隠されないため、開く操作をした箇所から遠い位置に表示すると、ユーザーがダイアログを見つけにくいためです。

アクセシビリティ

基本的なアクセシビリティ機能

キーボード操作

ESCキーを押すことでダイアログを閉じることができます。

構成

ModelessDialogは以下の要素で構成されます。

ヘッダーエリア
本文
フッターエリア（任意）

1. ヘッダーエリア

ヘッダーエリアの左端にはダイアログのタイトルが、右側にはダイアログを閉じるボタンが配置されます。

ダイアログのタイトルは、表示する情報を簡潔に表現するものをつけます。
ヘッダーエリアをドラッグしてダイアログの位置を移動できます。

2. 本文

ユーザーに提示したい情報を表示します。

3. フッターエリア（任意）

必要に応じてアクションボタンやリンクなどを配置します。

モバイル

モバイルでは画面の表示領域が狭いため、ダイアログを表示しながら背景の画面を操作することが困難です。そのため、モバイルではModelessDialogの代わりにMessageDialogを利用してください。

使い方チェックリスト

ModelessDialog

参照元：使用上の注意 > ダイアログを乱用しない「使用上の注意 > ダイアログを乱用しない」の本文へ移動

Should
ダイアログとして表示する・操作させるべき内容なのか、慎重にユースケースを定義し使用を検討する

参照元：レイアウト > 基準サイズ > `XS` 「レイアウト > 基準サイズ > `XS`」の本文へ移動

Should
入力要素を 1 つだけ持つなど、内容が極めて少ないダイアログには `XS` を使う

参照元：レイアウト > 基準サイズ > `S` 「レイアウト > 基準サイズ > `S`」の本文へ移動

Should
要素が少なく、要素が垂直方向に並ぶ、広い横幅を必要としないダイアログには `S` を使う

参照元：レイアウト > 基準サイズ > `M` 「レイアウト > 基準サイズ > `M`」の本文へ移動

Should
数行に渡るテキストの表示や、水平方向に要素を並べて表示する標準的なダイアログには `M` を使う

参照元：レイアウト > 基準サイズ > `L` 「レイアウト > 基準サイズ > `L`」の本文へ移動

Should
テーブルの表示やダイアログを複数カラムに分割するなど、広い横幅が必要なダイアログには `L` を使う

参照元：レイアウト > 基準サイズ > `XL` 「レイアウト > 基準サイズ > `XL`」の本文へ移動

Should
広い横幅が必要で、`L` ではコンテンツが収まりきらないダイアログには `XL` を使う

参照元：レイアウト > 基準サイズ > `XXL` 「レイアウト > 基準サイズ > `XXL`」の本文へ移動

Should
広い横幅が必要で、`XL` ではコンテンツが収まりきらないダイアログには `XXL` を使う

参照元：レイアウト > 基準サイズ > `FULL` 「レイアウト > 基準サイズ > `FULL`」の本文へ移動

Should
広い横幅が必要で、`XXL` ではコンテンツが収まりきらないダイアログには `FULL` を使う

参照元：レイアウト > 表示位置「レイアウト > 表示位置」の本文へ移動

Must
ModelessDialog はダイアログを開く操作をした箇所の付近に表示する

参照元：構成 > 1. ヘッダーエリア「構成 > 1. ヘッダーエリア」の本文へ移動

Must
ダイアログのタイトルは、表示する情報を簡潔に表現するものをつける

参照元：モバイル「モバイル」の本文へ移動

Must
モバイルでは ModelessDialog の代わりに MessageDialog を利用する

Props

heading必須

stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのタイトルの内容

footer

stringnumberfalsetrueReactElement<any, string | JSXElementConstructor<any>>Iterable<ReactNode>ReactPortal

ダイアログのフッタ部分の内容

isOpen必須

falsetrue

ダイアログが開かれているかどうかの真偽値

onClickClose

(e: MouseEvent<HTMLButtonElement, MouseEvent>) => void

閉じるボタンを押下したときのハンドラ

onPressEscape

() => void

ダイアログが開いている状態で Escape キーを押下したときのハンドラ

width非推奨

stringnumber

@deprecated ダイアログの幅を指定する場合は、width ではなく size を使用してください。ダイアログの幅

size

"XS""S""M""L""XL""XXL""FULL"

ダイアログの大きさ

height

stringnumber

ダイアログの高さ

top

stringnumber

ダイアログを開いたときの初期 top 位置

left

stringnumber

ダイアログを開いたときの初期 left 位置

right

stringnumber

ダイアログを開いたときの初期 right 位置

bottom

stringnumber

ダイアログを開いたときの初期 bottom 位置

portalParent

HTMLElementRefObject<HTMLElement>

ポータルの container となる DOM 要素を追加する親要素

resizable

falsetrue

リサイズ可能かどうか

ref

(instance: HTMLDivElement) => voidRefObject<HTMLDivElement>

className

string

contentBgColor

"BACKGROUND""COLUMN""BASE_GREY""OVER_BACKGROUND""HEAD""BORDER""ACTION_BACKGROUND""WHITE""GREY_5""GREY_6""GREY_7""GREY_9""GREY_20"

コンテンツ部分の背景色

contentPadding

0120.250.50.751.251.52.533.548"X3S""XXS""XS""S""M""L""XL""XXL""X3L"-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8{ block?: Gap; inline?: Gap; }

プロダクト

ページ内目次

ModelessDialog