ダイアログ

ダイアログは、アプリの前に表示されるモーダル ウィンドウです。ユーザーがすぐに応答する必要があるタスク情報を表示します。

ダイアログは、ユーザーの操作を必要とするアラートにすることができます。ユーザーに選択や確認を求める選択ダイアログや確認ダイアログにすることもできます。ダイアログは、閉じるか必要な操作が行われるまで、フォーカスが保持されます。ダイアログは妨げとなるため、慎重に使用する必要があります。

ダイアログはトーストに関連しています（どちらも Dialog コンポーネント ファミリーのメンバーです）が、以下のように目的と優先度が異なります。

コンポーネント 目的 優先度
トースト 情報メッセージを表示します。ユーザーの操作を必要としない。8 秒後に消えます。 低
ダイアログ ユーザーの操作が必要な情報とタスク オプションを表示します。ダイアログは、ユーザーが応答するまでフォーカスを保持します。 高

構造

ダイアログには、ユーザーのレスポンスをリクエストする情報テキストと UI コントロールが含まれます。

1. ダイアログの背景
2. カードのヘッダー
3. コンテンツ エリア
4. カードのアクション エリア

仕様

コールアウト アイコン
レイアウト ラベル
E、M、KL、P、Flex の定義
コールアウト アイコン
ボタン コンポーネント
仕様、スタイル ガイドラインなど
コールアウト アイコン
リストアイテム コンポーネント
仕様、スタイル ガイドラインなど

タイトルなしのダイアログ

タイトル付きのダイアログ

タイトルが中央に配置されたダイアログ

スクロール可能なダイアログ

カスタマイズ

OEM はダイアログの以下の要素をカスタマイズして、ブランドを反映できます。

  • フォント
  • 有効、無効、無効のボタンのスタイル
  • ボタンのサイズと配置

デザイン システムは、レイアウト、色、タイポグラフィ、サイズを使用してコンポーネントをカスタマイズするためのガイダンスを提供します。

例

タイトル付きのダイアログ - 曜日
タイトル付きのダイアログ - 夜
スクロール可能なダイアログ - 日
スクロール可能なダイアログ - 夜間
ダイアログの動作