1. Einführung
Material Components (MDC) unterstützen Entwickler bei der Implementierung von Material Design. MDC wurde von einem Team aus Entwicklern und UX-Designern bei Google entwickelt. Es enthält Dutzende schöne und funktionale UI-Komponenten und ist für Android, iOS, das Web und Flutter.material.io/develop verfügbar. |
In den Codelabs MDC-101 und MDC-102 haben Sie mithilfe von Material Components (MDC) die Grundlagen einer App namens Shrine erstellt. Dies ist eine E-Commerce-App für den Verkauf von Kleidung und Haushaltswaren. Der User Flow dieser App beginnt mit einem Anmeldebildschirm, über den Nutzende zu einem Startbildschirm mit Produkten gelangen.
Material Design wurde kürzlich erweitert, um Designschaffenden und Entwickelnden mehr Flexibilität zu bieten, die Marke ihres Produkts zum Ausdruck zu bringen. In diesem Code-Lab verwenden Sie MDC, um die Shrine App auf vielfältigere Weise als je zuvor an den einzigartigen Stil der Marke anzupassen.
Inhalt
In diesem Codelab kannst du „Shrine“ so anpassen, dass es seine Marke widerspiegelt:
- 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, die im JavaScript-Paketmanager npm enthalten ist
- Der Beispielcode (wird im nächsten Schritt heruntergeladen)
- Grundkenntnisse in HTML, CSS und JavaScript
Wie würden Sie Ihre Erfahrung mit Webentwicklung bewerten?
<ph type="x-smartling-placeholder">2. Entwicklungsumgebung einrichten
Weiter mit MDC-102?
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 Start-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-103/starter. Achten Sie darauf, dass Sie sich in diesem Verzeichnis cd befinden, bevor Sie beginnen.
...oder von 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 (es sollte Ihr aktuelles Verzeichnis sein, wenn Sie den obigen Schritt ausführen) folgenden Befehl aus:
npm install
Es werden zahlreiche Aktivitäten angezeigt. Am Ende sollte das Terminal eine erfolgreiche Installation anzeigen:
Starter-App ausführen
Führen Sie im selben Verzeichnis folgenden Befehl aus:
npm start
webpack-dev-server wird gestartet. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite aufzurufen.
Fertig! Die Anmeldeseite von Shrine sollte in deinem Browser ausgeführt werden. Füllen Sie die Felder für Nutzername und Passwort aus und klicken Sie auf „Weiter“. um zur Startseite zu gelangen. Auf der linken Seite sollte eine Navigationsleiste neben einem Raster mit Produktbildern angezeigt werden.
Die Navigationsleiste ist zwar funktionsfähig, soll sie aber an die Marke „Shrine“ anpassen, indem wir ihre Farbe, Höhe und Typografie ändern.
3. Farbe ändern
Dieses Farbdesign wurde von einem Designer mit benutzerdefinierten Farben erstellt (siehe Bild unten). Sie enthält Farben, die aus der Marke Shrine ausgewählt und auf den Material Theme Editor angewendet wurden. Dieser hat sie erweitert, um eine umfassendere Palette zu erstellen. (Diese Farben stammen nicht aus den Material-Farbvorlagen von 2014.)
Ändern wir nun die Farbe der Navigationsleiste der Shrine App, um dieses Farbschema widerzuspiegeln.
Designfarben überschreiben
Erstellen Sie eine neue Datei mit dem Namen _variables.scss, die Folgendes enthält:
$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 zur 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 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:
Ändern wir die Farbe des Anmeldebildschirms, damit sie zu unserem Farbschema passt.
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 nun so aussehen:
4. Typografie und Labelstile ändern
Zusätzlich zu den Farbänderungen haben Ihre Designschaffenden Ihnen auch spezifische Typografien zur Verwendung auf der Website bereitgestellt. Lassen Sie uns das auch zur Navigationsleiste hinzufügen.
Führen Sie folgenden Befehl aus, um das Typografie-Paket 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 der Klasse shrine-title den folgenden Mixin-Aufruf hinzu:
.shrine-title {
@include mdc-typography(headline6);
...
}
Als Nächstes gestalten wir die Leistenelemente.
Linientrennzeichen hinzufügen
Fügen Sie in home.html direkt nach dem <a ...>Featured</a>-Element Folgendes ein:
<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 home.scss im .product-list-Selektor 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 nun die Seite mit der spezifischen Farbe und Typografie von Shrine gestaltet haben, schauen wir uns die Bildliste mit den Produkten von Shrine an. Wir möchten die Aufmerksamkeit auf die Produkte lenken, indem wir sie stärker betonen.
Führen Sie folgenden Befehl aus, um das Elevation-Paket 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";
Umschließen der Bildliste mit einem neuen div-Element
Füge in home.html das folgende Markup um das <ul>-Element hinzu:
<div class="shrine-body">
<ul...>
</div>
Höhenunterschied 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 am linken Rand der weißen Oberfläche hinter den Bildlistenelementen einen Schatten hinzugefügt, sodass er leicht über der Navigation zu schwebt.
6. Layout ändern
Als Nächstes ändern wir das Layout, um Bilder mit unterschiedlichen Seitenverhältnissen und Größen anzuzeigen, damit jedes Bild in Bezug auf die anderen einzigartig aussieht.
HTML ändern
Aktualisieren Sie in home.html das mdc-image-list-Element, sodass es die Klasse mdc-image-list--masonry enthält:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Bilder hinzufügen
Ändern Sie in home.html das src-Attribut jedes img-Elements, damit es mit den Bildern im Ordner assets übereinstimmt. Aktualisieren Sie dann den Labeltext für jedes Bild. Wenn Sie fertig sind, sollte sie 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;
}
Der Code sollte jetzt mit dem im Ordner complete/ enthaltenen Code übereinstimmen.
7. Anderes Design ausprobieren
Farbe ist ein wirkungsvolles Mittel, um Ihre Marke auszudrücken, und eine kleine Farbänderung kann einen großen Einfluss auf die User Experience haben. Um dies 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 in der .username, .password-Auswahl. Sie 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 .shrine-logo-drawer-Selektor das Attribut fill durch die Farbe Primär:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Legen Sie entsprechend im .shrine-title-Selektor für die Eigenschaft color die Farbe Primär fest:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Entfernen Sie abschließend das zuvor unter dem .shrine-body-Selektor verwendete mdc-elevation-Mixin.
Erstellen und ausführen. Das neue Design sollte jetzt in Ihrem Browser angezeigt werden.
Gehen Sie jetzt zu http://localhost:8080/home.html, um die Änderungen auf der Seite home.html zu sehen.
8. Zusammenfassung
Sie haben jetzt eine App erstellt, die den Spezifikationen Ihrer Designfachkraft ähnelt.
Weiteres Vorgehen
Sie haben jetzt die folgenden MDC-Komponenten verwendet: Design, Typografie, Höhe und Form. Im MDC-Webkatalog finden Sie weitere Komponenten und Subsysteme.