1. Einführung
Mit Material Components (MDC) können Entwickler Material Design implementieren. MDC wurde von einem Team aus Ingenieuren und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten. Es ist für Android, iOS, das Web und Flutter verfügbar.material.io/develop |
In den Codelabs MDC-101 und MDC-102 haben Sie mit Material Components (MDC) die Grundlagen einer App namens Shrine erstellt. Dabei handelt es sich um eine E-Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Der User Flow dieser App beginnt mit einem Anmeldebildschirm, über den der Nutzer zu einem Startbildschirm mit Produkten gelangt.
Material Design wurde vor Kurzem erweitert, um Designern und Entwicklern mehr Flexibilität bei der Darstellung der Marke ihres Produkts zu bieten. In diesem Codelab verwenden Sie MDC, um die Shrine-App so anzupassen, dass der einzigartige Stil der Marke auf mehr Arten als je zuvor widergespiegelt wird.
Was Sie erstellen
In diesem Codelab passen Sie Shrine so an, dass die Marke widergespiegelt wird. Dazu verwenden Sie Folgendes:
- Farbe
- Typografie
- Höhe
- Form
- Layout
In diesem Codelab verwendete MDC-Webkomponenten und ‑Subsysteme
- Design
- Typografie
- Höhe
- Bildliste
Voraussetzungen
- Eine aktuelle Version von Node.js (im Lieferumfang enthalten ist npm, ein JavaScript-Paketmanager).
- Der Beispielcode (im nächsten Schritt herunterzuladen)
- Grundkenntnisse in HTML, CSS und JavaScript
Wie erfahren sind Sie in der Webentwicklung?
2. Entwicklungsumgebung einrichten
Sie machen mit MDC-102 weiter?
Wenn Sie MDC-102 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort: Farbe ändern.
Starter-Codelab-App herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-103/starter. Achten Sie darauf, dass Sie sich vor Beginn in diesem Verzeichnis befinden.cd
...oder aus GitHub klonen
Führen Sie die folgenden Befehle aus, um dieses Codelab aus GitHub zu klonen:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
Projektabhängigkeiten installieren
Führen Sie im Starter-Verzeichnis material-components-web-codelabs/mdc-103/starter (es sollte Ihr aktuelles Verzeichnis sein, wenn Sie den obigen Schritt ausführen) Folgendes aus:
npm install
Es wird viel Aktivität angezeigt und am Ende sollte im Terminal eine erfolgreiche Installation zu sehen sein:
Starter-App ausführen
Führen Sie im selben Verzeichnis Folgendes aus:
npm start
Der webpack-dev-server wird gestartet. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite zu sehen.
Fertig! Die Anmeldeseite von Shrine sollte in Ihrem Browser angezeigt werden. Geben Sie die Felder „Nutzername“ und „Passwort“ ein und klicken Sie auf die Schaltfläche „Weiter“, um zur Startseite zu gelangen. Links sollte ein Navigationsmenü und daneben ein Raster mit Produktbildern angezeigt werden.
Das Navigationsmenü funktioniert zwar, aber wir möchten es an die Marke Shrine anpassen, indem wir Farbe, Höhe und Typografie ändern.
3. Farbe ändern
Dieses Farbdesign wurde von einem Designer mit benutzerdefinierten Farben erstellt (siehe Abbildung unten). Es enthält Farben, die aus der Marke von Shrine ausgewählt und auf den Material Theme Editor angewendet wurden. Dort wurden sie erweitert, um eine umfassendere Palette zu erstellen. Diese Farben stammen nicht aus den Material-Farbpaletten von 2014.
Wir ändern die Farbe des Navigationsmenüs der Shrine-App, um dieses Farbschema widerzuspiegeln.
Designfarben überschreiben
Erstellen Sie eine neue Datei mit dem Namen _variables.scss und fügen Sie Folgendes ein:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
Importieren Sie sie dann ganz oben in _common.scss:
@import "./variables";
CSS-Stile für das Navigationsmenü hinzufügen
Fügen Sie in `home.scss` nach den vorhandenen Importen die folgende Importanweisung hinzu:
@import "@material/ripple/mixins";
Fügen Sie dann die folgenden Stile hinzu und erstellen Sie die Klasse .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
Aktualisieren Sie die Seite unter http://localhost:8080/home.html. Ihr Startbildschirm sollte jetzt so aussehen:
Wir ändern die Farbe des Anmeldebildschirms, damit sie unserem Farbschema entspricht.
CSS-Stile für die Anmeldeseite hinzufügen
Fügen Sie in login.scss die folgenden Zeilen hinzu:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
Fügen Sie außerdem die folgenden Mixin-Aufrufe in den CSS-Selektor .username, .password ein:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
Aktualisieren Sie die Seite unter http://localhost:8080/. Ihr Anmeldebildschirm sollte jetzt so aussehen:
4. Typografie und Labelstile ändern
Neben den Farbänderungen hat Ihr Designer Ihnen auch eine bestimmte Typografie für die Website vorgegeben. Wir fügen sie auch dem Navigationsmenü hinzu.
Führen Sie Folgendes aus, um das Paket für die Typografie zu installieren:
npm install @material/typography
CSS für die Typografie hinzufügen
Fügen Sie in home.scss nach den vorhandenen Importen die folgende Importanweisung hinzu:
@import "@material/typography/mdc-typography";
Fügen Sie dann der Klasse shrine-title den folgenden Mixin-Aufruf hinzu:
.shrine-title {
@include mdc-typography(headline6);
...
}
Als Nächstes gestalten wir die Menüelemente.
Linientrennzeichen hinzufügen
Fügen Sie in home.html direkt nach dem Element <a ...>Featured</a> Folgendes hinzu:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Fügen Sie home.scss die folgenden Stile hinzu:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
Bildelemente und Labels anpassen
Fügen Sie in home.scss im Selektor .product-list die folgenden Stile hinzu, um die Elemente und Labels anzupassen:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
Aktualisieren Sie die Seite. Ihr Startbildschirm sollte jetzt so aussehen:
5. Höhe anpassen
Nachdem Sie die Seite mit den spezifischen Farben und der Typografie von Shrine gestaltet haben, sehen wir uns die Bildliste mit den Produkten von Shrine an. Wir möchten die Produkte hervorheben, indem wir sie stärker betonen.
Führen Sie Folgendes aus, um das Paket für die Höhe zu installieren:
npm install @material/elevation
Importanweisung hinzufügen
Fügen Sie in home.scss nach der letzten Importanweisung die folgende Zeile hinzu:
@import "@material/elevation/mdc-elevation";
Bildliste mit einem neuen Div-Element umschließen
Fügen Sie in home.html das folgende Markup um das <ul>-Element herum ein:
<div class="shrine-body">
<ul...>
</div>
Höhe mit Sass-Mixins ändern
Fügen Sie in home.scss Folgendes hinzu:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Beeindruckend! Sie haben der linken Kante der weißen Fläche hinter den Elementen der Bildliste einen Schatten hinzugefügt, sodass sie leicht über der Navigation zu schweben scheint.
6. Layout ändern
Als Nächstes ändern wir das Layout, um Bilder mit unterschiedlichen Seitenverhältnissen und Größen anzuzeigen, sodass jedes Bild sich von den anderen abhebt.
HTML ändern
Aktualisieren Sie in home.html das Element mdc-image-list, sodass es die Klasse mdc-image-list--masonry enthält:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Bilder zu
Ändern Sie in home.html das Attribut src jedes img-Elements so, dass es den Bildern im Ordner assets entspricht. Aktualisieren Sie dann den Labeltext für jedes Bild. Wenn Sie fertig sind, sollte es so aussehen:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
CSS aktualisieren
Entfernen Sie in home.scss das Mixin mdc-image-list-standard-columns(4) und ersetzen Sie es durch das folgende Mixin:
@include mdc-image-list-masonry-columns(4);
Fügen Sie dann der Klasse product-list in home.scss die folgenden padding-Werte hinzu:
.product-list {
...
padding: 80px 100px 0;
}
Ihr Code sollte jetzt mit dem Code im Ordner complete/ übereinstimmen.
7. Anderes Design ausprobieren
Farbe ist eine wirkungsvolle Möglichkeit, Ihre Marke auszudrücken. Eine kleine Farbänderung kann große Auswirkungen auf die User Experience haben. Um das zu testen, sehen wir uns an, wie Shrine aussehen würde, wenn das Farbschema der Marke völlig anders wäre.
CSS ändern
Ersetzen Sie in _variables.scss die Variablen, die Sie für das primäre Design deklariert haben, durch Folgendes:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
Entfernen Sie in login.scss die Mixins im Selektor .username, .password. Die Ausgabe sollte so aussehen:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Entfernen Sie außerdem die Mixin-Überschreibung mdc-button-ink-color in der Klasse .cancel:
Fügen Sie in home.scss der Klasse .home die folgende Regel hinzu:
background-color: $mdc-theme-background;
Ersetzen Sie im Selektor .shrine-logo-drawer das Attribut fill durch die Farbe on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Legen Sie im Selektor .shrine-title das Attribut color ebenfalls auf die Farbe on-primary fest:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Entfernen Sie schließlich das zuvor verwendete Mixin mdc-elevation im Selektor .shrine-body.
Erstellen und führen Sie den Code aus. Das neue Design sollte jetzt in Ihrem Browser angezeigt werden.
Rufen Sie jetzt http://localhost:8080/home.html auf, um die Änderungen an der home.html Seite zu sehen.
8. Zusammenfassung
Sie haben jetzt eine App erstellt, die den Spezifikationen Ihres Designers entspricht.
Weiteres Vorgehen
Sie haben jetzt die folgenden MDC-Komponenten verwendet: Design, Typografie, Höhe und Form. Weitere Komponenten und Subsysteme finden Sie im MDC Web Catalog.