Modal

True (default)

ヘッダーを表示するデフォルトのオプションです。

False

ヘッダーを非表示にします。ヘッダーを非表示にする場合、必ずフッターを表示してください。

True (default)

ヘッダーのクローズボタンを表示するデフォルトのオプションです。

False

ヘッダーのクローズボタンをを非表示にします。クローズボタンを非表示にする場合、必ずフッターで代替のクローズトリガーを表示してください。

True

フッターを表示するデフォルトのオプションです。

ヘッダーを非表示にする場合や、ヘッダーだけでモーダルに関するアクションや情報を表現できない場合は、フッターを表示します。

False (default)

フッターを非表示にします。

フッターを非表示にする場合、必ずヘッダーを表示し、クローズボタンが機能するようにしてください。

モーダルはウインドウの画面中央に固定表示されます。

上下左右には40pxのオフセットが存在します。また、モーダルはオーバーレイコンポーネントの上に配置されます。

フルサイズのモーダルも同様に上下左右に40pxのオフセットが存在します。これによりメインUIの文脈を残すことができます。

領域外をクリックした際にモーダルを閉じるかどうかを、オプションで選択することができます。

ディスプレイの表示領域よりもコンテンツが多い場合、コンテンツがオーバーフローされます。

ボディー領域の最下部は、追加コンテンツがあることを示す必要があります。

• Vertical resizing: Hug
• Horizontal resizing: Fixed
• Padding top: 16px
• Padding bottom: 16px

編集や管理タスクなど、短時間で頻度の低いタスクで使用します。

アクションの実行・中断など、ユーザーのアクションを確認するメッセージには使用しないでください。代わりにダイアログを使用してください。

ユーザーの確認アクションを伴わないメッセージには使用しないでください。代わりにトーストを使用してください。

ヘッダータイトルは、モーダル内のタスクや目的を示すように簡潔に記述してください。また、タスクのアクションの接頭辞として機能するように留意してください。

ヘッダータイトルは改行せずに記述してください。複数行になった場合は、タイトルを再検討してください。