ダイアログ

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

ダイアログは、ユーザーの操作を必要とするアラートとして機能します。また、選択または確認を求めるダイアログとして機能し、ユーザーに選択または確定を求めることもあります。ダイアログは、閉じられるか必要なアクションが実行されるまでフォーカスを保持します。ダイアログは中断を伴うため、控えめに使用する必要があります。

ダイアログはトーストと関連していますが (両方とも Dialog ファミリーのコンポーネントのメンバーです)、表に示すように目的と優先順位が異なります。

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

解剖学

ダイアログには、ユーザーの応答を要求する情報テキストと UI コントロールが含まれています。

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

仕様

吹き出しアイコン
ボタンコンポーネント
仕様、スタイルガイドラインなど
吹き出しアイコン
リスト項目コンポーネント
仕様、スタイルガイドラインなど

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

タイトル付きダイアログ

中央にタイトルがあるダイアログ

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

カスタマイズ

ダイアログの次の側面をカスタマイズしてブランドを表現します。

  • フォント
  • アクティブ、非アクティブ、無効なボタンのスタイル設定
  • ボタンの寸法と配置

例

タイトル付きダイアログ - 日
タイトル付きダイアログ - 夜
スクロール可能なダイアログ - 日
スクロール可能なダイアログ - 夜
ダイアログの実践