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. |
Material Components for the Web (MDC Web) sind frameworkunabhängig und werden mit regulärem JavaScript erstellt. So lässt sich MDC Web nahtlos in Ihren Entwicklungsprozess einbinden. Diese Komponenten können bei Bedarf installiert werden, um agile Designverbesserungen an Ihrer vorhandenen App vorzunehmen.
Inhalt
In diesem Codelab ersetzen Sie einige vorhandene Komponenten in einem Formular durch Komponenten von MDC Web:
MDC-Webkomponenten in diesem Codelab
- Schaltfläche
- Auswählen
- Textfeld
Voraussetzungen
- Eine aktuelle Version von Node.js (im Lieferumfang von npm, einem JavaScript-Paketmanager)
- 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
Codelab-App für den Einstieg herunterladen
Die Start-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-111/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-111/starter
Projektabhängigkeiten installieren
Führen Sie im Startverzeichnis (material-components-web-codelabs/mdc-111/starter) folgenden Befehl aus:
npm install
Es werden viele Aktivitäten angezeigt. Am Ende sollte das Terminal eine erfolgreiche Installation anzeigen:
Starter-App ausführen
Führen Sie im Starter-Verzeichnis Folgendes aus:
npm start
Die webpack-dev-server wird gestartet. Rufen Sie die Seite mit Ihrem Browser unter http://localhost:8080/ auf.
Fertig! Daraufhin wird das Formular für die Versandadresse der App angezeigt:
3. Schaltfläche aktualisieren
Schaltfläche „MDC installieren“
Drücken Sie Ctrl + C, um den Entwicklungsserver zu beenden. Installieren Sie dann das NPM-Paket für die MDC-Schaltfläche und starten Sie den Server neu:
npm install @material/button npm start
CSS importieren
Löschen Sie im oberen Bereich von _theme.scss den .crane-button { ... }-Block und fügen Sie stattdessen Folgendes hinzu:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Markup aktualisieren
Entfernen Sie in index.html die Klasse crane-button aus dem Element <button>, fügen Sie die Klassen mdc-button und mdc-button--raised hinzu und verschachteln Sie das Label in einem <span>-Element mit der Klasse mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Die Welle hinzufügen
MDC-Schaltflächen können ohne JavaScript verwendet werden. Wenn Sie der Schaltfläche jedoch eine interaktive Welle hinzufügen, wird die Nutzererfahrung verbessert.
Drücken Sie Ctrl + C, um den Anwendungsserver zu beenden. Führen Sie dann diesen Befehl aus:
npm install @material/ripple npm start
Fügen Sie oben in app.js die folgende Importanweisung hinzu:
import {MDCRipple} from '@material/ripple';
Fügen Sie am Ende von app.js Folgendes hinzu, um die Welle für die Schaltfläche zu instanziieren:
new MDCRipple(document.querySelector('.mdc-button'));
Roboto-Schriftart importieren
In Material Design wird standardmäßig Roboto für Komponentenschriften verwendet.
Importieren Sie in index.html die Webschriftart „Roboto“, indem Sie dem <head>-Element Folgendes hinzufügen:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Aktualisieren Sie die Seite. Sie sollten dann in etwa Folgendes sehen:
Beim Drücken der Schaltfläche wird jetzt ein leichter Welleneffekt als visuelles Feedback angezeigt.
4. Ausgewähltes Element aktualisieren
Die MDC Select-Komponente umschließt ein natives HTML-<select>-Element. Verwenden Sie sie überall dort, wo Sie normalerweise ein <select> nutzen würden. Lassen Sie uns nun das Feld „State“ (Bundesstaat) aktualisieren.
MDC-Knotenmodul installieren
Drücken Sie Ctrl + C, um den Anwendungsserver zu beenden. Führen Sie dann diesen Befehl aus:
npm install @material/select npm start
CSS importieren
Fügen Sie _theme.scss direkt nach dem Import der Schaltfläche Folgendes hinzu:
@import "@material/select/mdc-select";
Markup aktualisieren
Suchen Sie in index.html nach dem Element <select>. Ersetzen Sie die Klasse crane-input durch mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Fügen Sie direkt über dem <select>-Tag das folgende Markup für den Drop-down-Pfeil der MDC Select-Komponente hinzu:
<i class="mdc-select__dropdown-icon"></i>
Ersetzen Sie direkt unter dem schließenden </select>-Tag die Klasse crane-label durch mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Fügen Sie dann direkt nach dem Label das folgende Markup hinzu:
<div class="mdc-line-ripple"></div>
Fügen Sie zum Schluss die folgenden Tags um das <select>-Element herum, aber innerhalb des crane-field-Elements ein:
<div class="mdc-select">
...
</div>
Das resultierende Markup sollte in etwa so aussehen:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
JS importieren
Fügen Sie ganz oben in app.js die folgende Importanweisung ein:
import {MDCSelect} from '@material/select';
Fügen Sie am Ende von app.js Folgendes hinzu, um die Auswahl zu instanziieren:
new MDCSelect(document.querySelector('.mdc-select'));
Aktualisieren Sie die Seite. Das sollte nun so aussehen:
Die MDC-Auswahlkomponente präsentiert dem Nutzer eine Liste von Optionen in einem vertrauten Format, aber mit modernem Stil.
5. Textfelder aktualisieren
Textfelder in Material Design haben gegenüber einfachen <input>-Elementen eine deutliche Verbesserung der Nutzerfreundlichkeit. Sie sind so konzipiert, dass sie in komplizierten Inhalten leicht zu identifizieren sind, und sie zeigen subtiles visuelles Feedback an, wenn die Nutzenden mit ihnen interagieren.
MDC-Knotenmodul installieren
Drücken Sie Ctrl + C, um den Anwendungsserver zu beenden. Führen Sie dann diesen Befehl aus:
npm install @material/textfield npm start
CSS hinzufügen
Fügen Sie _theme.scss direkt nach dem Import der Auswahl Folgendes hinzu:
@import "@material/textfield/mdc-text-field";
Markup aktualisieren
Suchen Sie in index.html nach dem <input>-Element für das Feld „Name“. Ersetzen Sie die Klasse crane-input durch mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Ersetzen Sie als Nächstes die Klasse crane-label durch mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Fügen Sie dann direkt nach dem Label das folgende Markup hinzu:
<div class="mdc-line-ripple"></div>
Umschließen Sie abschließend alle drei Elemente mit Folgendem:
<div class="mdc-text-field">
...
</div>
Das resultierende Markup sollte wie folgt aussehen:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Wiederholen Sie diesen Vorgang für alle anderen <input>-Elemente auf der Seite.
Das Markup für die Felder Address (Adresse), City (Ort) und ZIP Code (Postleitzahl) sollte so aussehen:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Sie können die Stile .crane-label und .crane-input jetzt aus _theme.scss entfernen, da sie nicht mehr verwendet werden.
JS importieren
Fügen Sie ganz oben in app.js die folgende Importanweisung ein:
import {MDCTextField} from '@material/textfield';
Fügen Sie unten in app.js Folgendes hinzu, um die Textfelder zu instanziieren:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Laden Sie die Seite neu. Sie sollte jetzt so aussehen:
Die Textfelder wurden jetzt alle auf Material-Design-Designthemen umgestellt.
6. Zusammenfassung
Sie haben einige gängige Komponenten (Textfelder, Auswahl und Schaltfläche) ersetzt, ohne Ihre App komplett neu zu gestalten. Sehr gut gemacht!
Weitere Komponenten, die einen großen Unterschied machen können, sind die obere App-Leiste und die Navigationsleiste.
Weiteres Vorgehen
Weitere Komponenten in MDC Web finden Sie im MDC Web-Katalog.
Wenn Sie MDC Web mit einem bestimmten Framework verwenden möchten, lesen Sie MDC-112: Integrate MDC with Web Frameworks.