1. Einführung
Mit Material Components (MDC) können Entwickler Material Design implementieren. 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. |
Im Codelab MDC-101 haben Sie zwei Material Components (MDC) zum Erstellen einer Benutzeroberfläche für die Anmeldeseite verwendet: das Textfeld und die Schaltfläche. Jetzt fügen wir Navigation, Struktur und Daten hinzu.
Inhalt
In diesem Codelab erstellen Sie eine Startseite für die E-Commerce-App Shrine, in der Kleidung und Haushaltswaren verkauft werden. Sie enthält:
- Navigationsleiste
- Eine Bildliste voller Produkte
MDC-Webkomponenten in diesem Codelab
- Leiste
- 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 der Webentwicklung bewerten?
2. Entwicklungsumgebung einrichten
Weiter von MDC-101?
Wenn Sie MDC-101 abgeschlossen haben, sollte Ihr Code für dieses Codelab bereit sein. Fahren Sie mit Schritt 3 „Navigationsleiste hinzufügen“ fort.
Codelab-App für den Einstieg herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-102/starter. Sie müssen sich vor Beginn in diesem Verzeichnis cd befinden.
...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-102/starter
Projektabhängigkeiten installieren
Das aktuelle Verzeichnis sollte material-components-web-codelabs/mdc-102/starter. sein. Führen Sie dort den folgenden Befehl aus:
npm install
Nach einer gewissen Zeit sollte auf dem Terminal eine erfolgreiche Installation angezeigt werden:
Starter-App ausführen
Führen Sie im selben Verzeichnis folgenden Befehl aus:
npm start
Die webpack-dev-server wird gestartet. Rufen Sie die Seite mit Ihrem Browser unter http://localhost:8080/ auf.
Fertig! Sie sollten die Anmeldeseite von Shrine aus dem MDC-101-Codelab sehen.
Die Anmeldeseite sieht jetzt gut aus. Fügen Sie der App nun einige Produkte hinzu. Geben Sie einen gültigen Nutzernamen und ein gültiges Passwort ein und klicken Sie auf die Schaltfläche „Weiter“, um zur Startseite zu gelangen.
3. Navigationsleiste hinzufügen
Wenn sich der Nutzer anmeldet, wird eine Startseite mit dem Text „Du hast es!“ angezeigt. Sehr gut. Jetzt müssen die Nutzenden jedoch Aktionen ausführen und ein Gefühl dafür bekommen, wo sie sich in der App befinden. Dazu fügen wir die Navigation hinzu.
Navigationsmuster im Material Design bieten ein hohes Maß an Nutzungsfreundlichkeit. Die Material-Navigationsleiste bietet Navigation und schnellen Zugriff auf andere Aktionen. Jetzt fügen wir einen Zeitraum hinzu.
MDC-Schieberegler und -Liste installieren
Führen Sie zum Installieren der Pakete für die Schubladenkomponente Folgendes aus:
npm install @material/drawer @material/list
HTML hinzufügen
Ersetzen Sie in home.html „Du hast es geschafft!“ durch das folgende Markup für die Schublade und ihre Elemente:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
CSS hinzufügen
Fügen Sie in home.scss die folgenden Importanweisungen nach dem vorhandenen Import hinzu:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
Fügen Sie unten in home.scss die folgenden Stile hinzu:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
JavaScript hinzufügen
Für eine korrekte Tastaturnavigation muss die MDC-Liste in der Navigationsleiste instanziiert werden. Öffnen Sie home.js, das derzeit leer ist, und fügen Sie den folgenden Code hinzu:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
Aktualisieren Sie die Seite unter http://localhost:8080/home.html. Ihre Startseite sollte jetzt so aussehen:
Jetzt enthält die Startseite eine dauerhafte Navigationsleiste mit verschiedenen Navigationselementen, wobei das erste Element aktiv ist.
4. Bilder mit Textlabels hinzufügen
Nachdem unsere App nun eine gewisse Struktur hat, organisieren wir die Inhalte, indem wir sie in eine Bilderliste einfügen.
MDC-Bildliste installieren
Führen Sie folgenden Befehl aus, um das Paket für die Image-Listen-Komponente zu installieren:
npm install @material/image-list
HTML-Code für eine Liste mit einem Eintrag hinzufügen
Als Erstes fügen wir eine Bilderliste neben der Navigationsleiste hinzu. Wir beginnen mit der Liste, indem wir ein einzelnes Element hinzufügen, das aus einem Bild und einem Textlabel besteht.
Fügen Sie in home.html nach dem Ende des <aside>-Elements den folgenden HTML-Code hinzu:
<ul class="mdc-image-list product-list">
<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>
Die Liste enthält die zusätzliche Klasse product-list, mit der benutzerdefinierte Stile sowohl in dieser Anleitung als auch in MDC-103 angewendet werden.
CSS hinzufügen
Fügen Sie zuerst in home.scss einen Import für die Komponentenstile der Bildliste nach den vorhandenen Importen hinzu:
@import "@material/image-list/mdc-image-list";
Fügen Sie als Nächstes die folgenden Stile nach den ersten Stilen für die Startseite hinzu:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Bei diesen Stilen werden die Bilder in der Bildliste in vier Spalten angezeigt, sodass die Bildliste unabhängig von der Schublade gescrollt werden kann.
Aktualisieren Sie die Seite. Die Startseite sollte jetzt so aussehen:
Eine Bilderliste soll viele Bilder in einer Sammlung anzeigen. Fügen Sie also weitere Bilder hinzu, damit Sie die Funktion der Komponente besser nachvollziehen können.
Kopieren Sie in home.html das vorhandene <li>-Element:
<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>
Fügen Sie es dann 15-mal nach dem vorhandenen Element (vor dem schließenden </ul>-Tag) ein. Das ergibt insgesamt 16 Bilder. Machen Sie sich noch keine Gedanken über eindeutige Bilder und Titel. Mit diesen Themen beschäftigen wir uns in MDC-103.
Aktualisieren. Jetzt sollte die Startseite so aussehen:
Die Bildliste enthält vier Bilder pro Zeile. Die Größe der Bilder wird automatisch an den verfügbaren Platz auf dem Bildschirm angepasst.
5. Zusammenfassung
Ihre Website hat einen einfachen Ablauf, bei dem Nutzer von der Anmeldeseite zu einer Startseite weitergeleitet werden, auf der Produkte angezeigt werden. Mit nur wenigen Codezeilen haben Sie einen Auszug und eine Bildliste hinzugefügt, um Inhalte zu präsentieren. Die Startseite hat jetzt eine grundlegende Struktur und Inhalte.
Weiteres Vorgehen
Mit der Leiste und der Bildliste haben Sie nun zwei weitere Kernkomponenten von Material Design aus der MDC-Webbibliothek verwendet. Weitere Komponenten finden Sie im MDC-Webkatalog.
Die Startseite ist zwar voll funktionsfähig, drückt aber noch keine bestimmte Marke oder Sichtweise aus. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type passen Sie den Stil dieser Komponenten an, um eine lebendige, moderne Marke zu präsentieren.