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, Web und Flutter verfügbar. material.io/develop |
Im Codelab MDC-101 haben Sie zwei Material Components (MDC) verwendet, um eine Anmeldeseite zu erstellen: das Textfeld und die Schaltfläche. Jetzt fügen wir Navigation, Struktur und Daten hinzu.
Umfang
In diesem Codelab erstellen Sie eine Startseite für die App Shrine, eine E-Commerce-App, in der Kleidung und Haushaltswaren verkauft werden. Sie enthält:
- Navigationsleiste
- Eine Bildliste mit vielen Produkten
MDC Web-Komponenten in diesem Codelab
- Leiste
- 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?
Sie machen mit MDC-101 weiter?
Wenn Sie MDC-101 abgeschlossen haben, sollte Ihr Code für dieses Codelab vorbereitet sein. Zu Schritt 3: Navigationsleiste hinzufügen springen
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-102/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-102/starter
Projektabhängigkeiten installieren
Ihr aktuelles Verzeichnis sollte material-components-web-codelabs/mdc-102/starter. sein. Führen Sie dort den folgenden Befehl aus:
npm install
Nachdem viel Aktivität angezeigt wurde, sollte auf dem Terminal eine erfolgreiche Installation angezeigt werden:
Start-App ausführen
Führen Sie im selben Verzeichnis Folgendes aus:
npm start
Die webpack-dev-server beginnt. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite aufzurufen.
Fertig! Sie sollten die Shrine-Anmeldeseite aus dem MDC-101-Codelab sehen.
Nachdem die Anmeldeseite gut aussieht, füllen wir die App mit einigen Produkten. 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.
Wenn sich der Nutzer anmeldet, wird eine Startseite mit der Meldung „Du hast es geschafft!“ angezeigt. Sehr gut. Jetzt braucht unser Nutzer aber Aktionen, die er ausführen kann, und eine Orientierungshilfe, damit er weiß, wo er sich in der App befindet. Dazu fügen wir die Navigation hinzu.
Material Design-Navigationsmuster bieten ein hohes Maß an Nutzerfreundlichkeit. Die Material-Navigationsleiste bietet Navigation und schnellen Zugriff auf andere Aktionen. Jetzt fügen wir einen Zeitraum hinzu.
MDC Drawer und List installieren
Führen Sie Folgendes aus, um die Pakete für die Schubladenkomponente zu installieren:
npm install @material/drawer @material/list
HTML hinzufügen
Ersetzen Sie in home.html „You did it!“ 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-Code 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
Wir müssen die MDC-Liste in der Navigationsleiste instanziieren, damit die Tastaturnavigation richtig funktioniert. Ö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 nun so aussehen:
Auf der Startseite wird jetzt ein dauerhaft sichtbares Navigationsmenü mit verschiedenen Navigationselementen angezeigt, wobei das erste Element aktiv ist.
Nachdem unsere App nun eine Struktur hat, organisieren wir die Inhalte, indem wir sie in eine Bildliste einfügen.
MDC-Bildliste installieren
Führen Sie den folgenden Befehl aus, um das Paket für die Bildlistenkomponente zu installieren:
npm install @material/image-list
HTML für eine Liste mit einem Element hinzufügen
Fügen wir zuerst eine Bildliste neben dem Navigationsmenü hinzu. Wir beginnen die Liste mit einem einzelnen Element, das aus einem Bild und einem Textlabel besteht.
Fügen Sie in home.html den folgenden HTML-Code nach dem Ende des <aside>-Elements ein:
<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 eine zusätzliche Klasse, product-list, mit der sowohl in dieser Anleitung als auch in MDC-103 benutzerdefinierte Stile angewendet werden.
CSS-Code hinzufügen
Fügen Sie zuerst in home.scss nach den vorhandenen Importen einen Import für die Stile der Bildlistenkomponente hinzu:
@import "@material/image-list/mdc-image-list";Fügen Sie als Nächstes die folgenden Formatierungen nach den ursprünglichen Formatierungen der Startseite hinzu:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}Diese Stile weisen die Bildliste an, Bilder in vier Spalten anzuzeigen. So wird sichergestellt, dass die Bildliste unabhängig vom Drawer gescrollt wird.
Aktualisieren Sie die Seite. Die Startseite sollte nun so aussehen:
Eine Bildliste ist dazu gedacht, viele Bilder in einer Sammlung anzuzeigen. Fügen wir also weitere Bilder hinzu, um besser zu sehen, wie die Komponente funktioniert.
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 ihn dann 15 Mal nach dem vorhandenen Element (vor dem schließenden </ul>-Tag) ein. So erhalten Sie insgesamt 16 Bilder. Sie müssen sich noch keine Gedanken über einzigartige Bilder und Titel machen. Das ist Thema in MDC-103.
Aktualisieren. Die Startseite sollte jetzt so aussehen:
In der Bildliste werden vier Bilder pro Zeile angezeigt. Die Bilder werden automatisch an den verfügbaren Bildschirmplatz angepasst.
Ihre Website hat einen einfachen Ablauf, der den Nutzer von der Anmeldeseite zu einer Startseite führt, auf der Produkte angesehen werden können. Mit nur wenigen Codezeilen haben Sie eine Schublade und eine Bildliste zum Präsentieren von Inhalten hinzugefügt. Die Startseite hat jetzt eine grundlegende Struktur und grundlegende Inhalte.
Weiteres Vorgehen
Mit der Schublade und der Bildliste haben Sie nun zwei weitere Material Design-Kernkomponenten aus der MDC Web-Bibliothek verwendet. Weitere Komponenten finden Sie im MDC Web-Katalog.
Die Startseite ist zwar voll funktionsfähig, aber es wird noch keine bestimmte Marke oder Meinung vertreten. In MDC-103: Material Design Theming with Color, Shape, Elevation and Type (MDC-103: Material Design-Theming mit Farbe, Form, Höhe und Typ) passen Sie den Stil dieser Komponenten an, um eine lebendige, moderne Marke zu präsentieren.