1. Einführung
Material Components (MDC) helfen Entwicklern bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern 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, einer E‑Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Der User Flow dieser App beginnt mit einem Anmeldebildschirm, über den der Nutzer dann zu einem Startbildschirm mit Produkten gelangt.
Material Design wurde vor Kurzem erweitert, um Designern und Entwicklern mehr Flexibilität bei der Darstellung der Markenidentität ihres Produkts zu bieten. In diesem Codelab verwenden Sie MDC, um die Shrine-App so anzupassen, dass sie den einzigartigen Stil der Marke widerspiegelt.
Umfang
In diesem Codelab passen Sie Shrine an die Marke an. Dazu verwenden Sie:
- Farbe
- Typografie
- Höhe
- Form
- Layout
In diesem Codelab verwendete MDC Web-Komponenten und ‑Subsysteme
- Design
- Typografie
- Höhe
- Bildliste
Voraussetzungen
- Eine aktuelle Version von Node.js (die mit npm, einem JavaScript-Paketmanager, gebündelt ist).
- Der Beispielcode, der im nächsten Schritt heruntergeladen werden muss
- Grundkenntnisse in HTML, CSS und JavaScript
Wie würden Sie Ihre Erfahrung mit der Webentwicklung bewerten?
2. Entwicklungsumgebung einrichten
Sie haben bereits MDC-102 absolviert?
Wenn Sie MDC-102 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 fort: Farbe ändern.
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-103/starter. cd Sie vor Beginn in dieses Verzeichnis.
…oder aus GitHub klonen
Führen Sie die folgenden Befehle aus, um dieses Codelab von 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 Startverzeichnis material-components-web-codelabs/mdc-103/starter (das sollte Ihr aktuelles Verzeichnis sein, wenn Sie den obigen Schritt ausgeführt haben) Folgendes aus:
npm install
Sie sehen dann viele Aktivitäten und am Ende sollte in Ihrem Terminal eine erfolgreiche Installation angezeigt werden:
Start-App ausführen
Führen Sie im selben Verzeichnis folgenden Befehl aus:
npm start
Die webpack-dev-server beginnt. 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. Füllen Sie die Felder „Nutzername“ und „Passwort“ aus 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.
Die Navigationsleiste funktioniert zwar, aber wir möchten sie an das Shrine-Branding anpassen, indem wir ihre Farbe, Erhebung 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 der Navigationsleiste der Shrine App, damit sie dem Farbschema entspricht.
Designfarben überschreiben
Erstellen Sie eine neue Datei mit dem Namen _variables.scss und folgendem Inhalt:
$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 es dann ganz oben in _common.scss:
@import "./variables";
CSS-Formatierung für die Navigationsleiste 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, um die Klasse .shrine-drawer zu erstellen:
.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 zur 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 Farbänderungen hat Ihr Designer Ihnen auch eine bestimmte Typografie für die Website vorgegeben. Fügen wir das auch der Navigationsleiste hinzu.
Führen Sie Folgendes aus, um das Paket für Typografie zu installieren:
npm install @material/typography
CSS für 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 den folgenden Mixin-Aufruf zur Klasse shrine-title hinzu:
.shrine-title {
@include mdc-typography(headline6);
...
}
Als Nächstes gestalten wir die Elemente der Seitenleiste.
Zeilentrennzeichen hinzufügen
Fügen Sie in home.html Folgendes direkt nach dem <a ...>Featured</a>-Element hinzu:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Fügen Sie home.scss die folgenden Formatierungen 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
Wenn Sie die Elemente und Labels anpassen möchten, fügen Sie die folgenden Stile in home.scss innerhalb des Selektors .product-list hinzu:
.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 Farben und der Typografie von Shrine gestaltet haben, sehen wir uns nun die Bildliste mit den Produkten von Shrine an. Wir möchten die Produkte stärker in den Fokus rücken.
Führen Sie den folgenden Befehl aus, um das Paket für Elevation zu installieren:
npm install @material/elevation
Importanweisung hinzufügen
Fügen Sie in home.scss die folgende Zeile nach der letzten Importanweisung hinzu:
@import "@material/elevation/mdc-elevation";
Bildliste mit einem neuen Div-Tag 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 Listenelementen ein Schatten hinzugefügt, sodass sie leicht über der Navigation zu schweben scheint.
6. Layout ändern
Als Nächstes ändern wir das Layout, damit die Bilder in unterschiedlichen Seitenverhältnissen und Größen dargestellt werden und sich so voneinander abheben.
HTML-Code ä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 mit den Bildern im Ordner assets übereinstimmt. Aktualisieren Sie dann den Labeltext für jedes Bild. Wenn alles fertig ist, 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 den Mixin mdc-image-list-standard-columns(4) und ersetzen Sie ihn durch den folgenden Mixin:
@include mdc-image-list-masonry-columns(4);
Fügen Sie dann die folgenden padding-Werte der Klasse product-list in home.scss hinzu:
.product-list {
...
padding: 80px 100px 0;
}
Ihr Code sollte jetzt mit dem Code im Ordner complete/ übereinstimmen.
7. Anderes Design ausprobieren
Farbe ist ein wirkungsvolles Mittel, um Ihre Marke zu präsentieren. Eine kleine Farbänderung kann sich stark auf die User Experience auswirken. 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 Thema 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 mdc-button-ink-color-Mixin-Überschreibung in der .cancel-Klasse:
Fügen Sie in home.scss die folgende Regel zur Klasse .home hinzu:
background-color: $mdc-theme-background;
Ersetzen Sie im Selektor .shrine-logo-drawer die Eigenschaft fill durch die Farbe on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Legen Sie im .shrine-title-Selektor die color-Eigenschaft auf die Farbe on-primary fest:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Entfernen Sie schließlich das zuvor verwendete mdc-elevation-Mixin unter dem Selektor .shrine-body.
Erstellen und ausführen Das neue Design sollte jetzt in Ihrem Browser angezeigt werden.
Rufen Sie jetzt http://localhost:8080/home.html auf, um die Änderungen auf der Seite home.html zu sehen.
8. Zusammenfassung
Sie haben jetzt eine App erstellt, die den Vorgaben Ihres Designers entspricht.
Weiteres Vorgehen
Sie haben jetzt die folgenden MDC-Komponenten verwendet: Theme, Typografie, Erhebung und Form. Weitere Komponenten und Subsysteme finden Sie im MDC Web Catalog.