web-dev-qa-db-ja.com

背景色のマテリアルダイアログヘッダー

私は現在、Angular 2 /マテリアルデザインを使用するWebアプリケーションのビジュアルデザインに取り組んでいます。そこで、MDダイアログのヘッダーデザインに疑問があります。背景色を使用する必要がありますか?または、背景色のないダイアログのヘッダーテキストだけですか?MDガイドラインの詳細はここにありませんでした。

背景色付き-サンプル

enter image description here

背景色なし-サンプル

enter image description here

6
NPN

重要な場合は、 ダイアログのガイドライン があります。

一般に、ポップアップダイアログが大きなワークフローのプロセスにおける単なる確認ま​​たは小さなやり取りである場合、個別のタイトルバーの色は必要ありません。

あなたの例から、あなたはポップアップダイアログをデザインしているように見えますが、これは私が推測しているように、より大きなワークフローの一部になるでしょう。この場合、タイトルの色はお勧めしません。

ただし、ユーザーの追加は通常フォームです。ダイアログでユーザーを追加している場合、私はあなたのユースケースについてもっと知りたいです。

タイトルの色は、アプリケーションの特定の独立した機能またはモジュールを示す場合は分離されています。これらの独立した機能またはモジュールには、独自の画面があります。これらの画面は、タイトルのカラー処理に値します。

少しお役に立てば幸いです。

3
Sol

ダイアログコンポーネントにマテリアルテーマを適用させます。

公式ドキュメントでは、アプリケーションのテーマに合う場合、ダイアログの背景色を使用することもできます https://material.io/guidelines/components/dialogs.html#dialogs-confirmation-dialogs

コンテンツに基づいて背景色を使用するかどうかを決定すると、一貫性の問題が発生します。したがって、一般に、アプリケーションのテーマで背景色を使用する必要がある場合タイトル-それを使用してください。

3
DPS

ダイアログとして使用している場合、ヘッダーに色を追加する必要はありません。

このリンクを確認してください: http://codepen.io/Garbee/full/EPoaMj/


新しいウィンドウにある場合。次に、必要なカスタマイズされた(プライマリ、セカンダリ)カラーに基づいてカラーを追加できます。 https://material.io/guidelines/components/dialogs.html#dialogs-specs

0
Amrut Dagade