it-swarm.com.de

Material Dialog Header mit Hintergrundfarbe

Ich arbeite derzeit an visuellem Design für Webanwendungen, die Angular 2/Materialdesign) verwenden. Dort habe ich Zweifel an einem MD-Dialog-Header-Design, muss es mit Hintergrundfarbe sein oder nur den Kopfzeilentext im Dialogfeld ohne Hintergrundfarbe, in dem ich keine weiteren Details zur MD-Richtlinie finden konnte. Schätzen Sie Ihre Hilfe/Kommentare.

Mit der Hintergrundfarbe

(enter image description here

Ohne Hintergrundfarbe

(enter image description here

6
NPN

Wenn Sie Material verwenden, haben sie Richtlinien für Dialoge .

Wenn Ihr Popup-Dialogfeld nur eine Bestätigung oder eine kleine Interaktion bei einem größeren Workflow ist , benötigen Sie im Allgemeinen keine separate Titelleistenfarbe .

Aus Ihrem Beispiel geht hervor, dass Sie ein Popup-Dialogfeld entwerfen, das, wie ich vermute, Teil eines größeren Workflows sein wird. Ich werde in diesem Fall keine Titelfarbe empfehlen.

Das Hinzufügen eines Benutzers ist jedoch im Allgemeinen ein Formular. Wenn Sie einen Benutzer in einem Dialogfeld hinzufügen, möchte ich mehr über Ihren Anwendungsfall erfahren.

Titelfarben sind getrennt, wenn sie eine bestimmte unabhängige Funktion oder ein bestimmtes Modul Ihrer Anwendung bezeichnen. Diese unabhängigen Funktionen oder Module haben ihre eigenen Bildschirme. Diese Bildschirme verdienen eine Farbbehandlung für den Titel.

Ich hoffe, ich habe geholfen.

3
Sol

Stellen Sie sicher, dass die Dialogkomponente Ihrem Materialthema entspricht.

In der offiziellen Dokumentation können Sie auch Hintergrundfarben für Dialoge verwenden, wenn dies zu Ihrem Anwendungsthema passt - https://material.io/guidelines/components/dialogs.html#dialogs-confirmation-dialogs

Die Entscheidung, ob Hintergrundfarbe verwendet werden soll oder nicht, führt zu Konsistenzproblemen. Wenn Ihr Anwendungsthema die Verwendung von Hintergrundfarben erfordert, ist dies im Allgemeinen der Fall für Titel - benutze es.

3
DPS

Wenn Sie als Dialogfeld verwenden, müssen Sie keine Farbe für die Kopfzeile hinzufügen.

Überprüfen Sie diesen Link: http://codepen.io/Garbee/full/EPoaMj/


Falls es im neuen Fenster ist. Anschließend können Sie eine Farbe hinzufügen, die auf der von Ihnen benötigten benutzerdefinierten (Primär-, Sekundär-) Farbe basiert. https://material.io/guidelines/components/dialogs.html#dialogs-specs

0
Amrut Dagade