Informationen zu diesem Codelab
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. |
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 eine App namens Shrine, eine E-Commerce-App für Kleidung und Haushaltswaren. Sie enthält Folgendes:
- Eine 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 Webentwicklung bewerten?
2. Entwicklungsumgebung einrichten
Weiter von MDC-101?
Wenn du MDC-101 abgeschlossen hast, sollte dein Code für dieses Codelab vorbereitet sein. Fahren Sie mit Schritt 3 „Navigationsleiste hinzufügen“ fort.
Starter-Codelab-App herunterladen
Die Start-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-102/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-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
Wenn zahlreiche Aktivitäten angezeigt werden, sollte Ihr 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 im Codelab „MDC-101“ sollte angezeigt werden.
Jetzt, da die Anmeldeseite gut aussieht, fügen wir einige Produkte in die App ein. Geben Sie einen gültigen Nutzernamen und ein gültiges Passwort ein und klicken Sie auf „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-Drawer und -Liste installieren
Führen Sie folgenden Befehl aus, um die Pakete für die Drawer-Komponente zu installieren:
npm install @material/drawer @material/list
HTML hinzufügen
Ersetzen Sie in home.html „Du hast es!“ mit dem folgenden Markup für die Leiste 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 nach dem vorhandenen Import die folgenden Importanweisungen 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 hat die Startseite eine 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-Image-Liste 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 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 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 hinter den ersten Stilen der Startseite hinzu:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Mit diesen Stilen wird die Bildliste angewiesen, Bilder in vier Spalten anzuzeigen, sodass sichergestellt wird, dass die Bildliste unabhängig von der Leiste scrollt.
Aktualisieren Sie die Seite. Die Startseite sollte jetzt so aussehen:
In einer Bildliste sollen viele Bilder in einer Sammlung angezeigt werden. Fügen Sie also weitere Bilder hinzu, um die Funktionsweise der Komponente besser zu sehen.
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üge es dann 15 Mal nach dem vorhandenen Element (vor dem schließenden </ul>-Tag) ein. Insgesamt sind das 16 Bilder. Sie brauchen sich noch keine Gedanken über individuelle Bilder und Titel zu machen. gelangen Sie zu denen von 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 verfügt über einen grundlegenden Ablauf, der den Nutzer von der Anmeldeseite zu einer Startseite leitet, auf der die Produkte angezeigt werden können. Mit nur wenigen Codezeilen haben Sie eine Leiste und eine Bildliste hinzugefügt, um Inhalte zu präsentieren. Die Startseite weist jetzt eine grundlegende Struktur und einen grundlegenden Inhalt auf.
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 einen bestimmten Standpunkt 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 auszudrücken.