1. Einführung
Mit Material Components (MDC) können Entwickler Material Design implementieren. MDC wurde von einem Team aus Ingenieuren und UX-Designern bei Google entwickelt und bietet Dutzende von ansprechenden und funktionalen UI-Komponenten. Es ist für Android, iOS, das Web und Flutter verfügbar.material.io/develop |
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 einfügen. Diese Komponenten können nach Bedarf installiert werden, um agile Designverbesserungen in Ihrer bestehenden App vorzunehmen.
Was Sie erstellen
In diesem Codelab ersetzen Sie einige vorhandene Komponenten in einem Formular durch Komponenten von MDC Web:
MDC Web-Komponenten in diesem Codelab
- Schaltfläche
- Auswählen
- Textfeld
Voraussetzungen
- Eine aktuelle Version von Node.js (mit npm, einem JavaScript-Paketmanager)
- Der Beispielcode (im nächsten Schritt herunterladen)
- Grundkenntnisse in HTML, CSS und JavaScript
Wie würden Sie Ihre Kenntnisse in der Webentwicklung einschätzen?
2. Entwicklungsumgebung einrichten
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-111/starter. Wechseln Sie vor dem Start in dieses Verzeichnis.cd
...oder aus GitHub klonen
Führen Sie die folgenden Befehle aus, um dieses Codelab aus 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 Starter-Verzeichnis (material-components-web-codelabs/mdc-111/starter) folgenden Befehl aus:
npm install
Es wird viel Aktivität angezeigt und am Ende sollte im Terminal eine erfolgreiche Installation zu sehen sein:
Starter-App ausführen
Führen Sie im Starter-Verzeichnis folgenden Befehl aus:
npm start
Der webpack-dev-server wird gestartet. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite zu sehen.
Fertig! Sie sollten das Formular für die Lieferadresse der App sehen:
3. Schaltfläche aktualisieren
MDC-Schaltfläche installieren
Drücken Sie Ctrl + C, um den Entwicklungsserver zu beenden. Installieren Sie dann das MDC-Schaltflächen- NPM-Paket und starten Sie den Server neu:
npm install @material/button npm start
CSS-Code importieren
Löschen Sie oben in _theme.scss den Block .crane-button { ... } und fügen Sie stattdessen Folgendes ein:
$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>
Wellen 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 Entwicklungsserver zu beenden. Führen Sie dann folgenden 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 unten in app.js Folgendes hinzu, um die Welle auf der Schaltfläche zu instanziieren:
new MDCRipple(document.querySelector('.mdc-button'));
Roboto-Schriftart importieren
Standardmäßig verwendet Material Design Roboto für die Schriftarten der Komponenten.
Importieren Sie in index.html die Roboto-Webschriftart, indem Sie dem Element <head> Folgendes hinzufügen:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Laden Sie die Seite neu. Sie sollten in etwa Folgendes sehen:
Die Schaltfläche zeigt jetzt einen subtilen Welleneffekt als visuelles Feedback an, wenn sie gedrückt wird.
4. Auswahlelement aktualisieren
Die MDC-Auswahlkomponente umschließt ein natives HTML <select> Element. Verwenden Sie sie überall dort, wo Sie normalerweise ein <select>-Element verwenden würden. Wir aktualisieren jetzt das "Bundesland" Feld.
MDC-Node-Modul installieren
Drücken Sie Ctrl + C, um den Entwicklungsserver zu beenden. Führen Sie dann folgenden Befehl aus:
npm install @material/select npm start
CSS-Code 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 das 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 Tag <select> das folgende Markup für den Drop-down-Pfeil der MDC-Auswahlkomponente hinzu:
<i class="mdc-select__dropdown-icon"></i>
Ersetzen Sie direkt unter dem schließenden Tag </select> 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 schließlich die folgenden Tags um das <select> Element herum hinzu (aber innerhalb des crane-field Elements):
<div class="mdc-select">
...
</div>
Das resultierende Markup sollte 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-Code importieren
Fügen Sie oben in app.js die folgende Importanweisung hinzu:
import {MDCSelect} from '@material/select';
Fügen Sie unten in app.js Folgendes hinzu, um die Auswahl zu instanziieren:
new MDCSelect(document.querySelector('.mdc-select'));
Laden Sie die Seite neu. Sie sollte jetzt so aussehen:
Die MDC-Auswahlkomponente präsentiert dem Nutzer eine Liste von Optionen in einem vertrauten Format, aber mit modernem Design.
5. Textfelder aktualisieren
Material Design-Textfelder bieten im Vergleich zu einfachen <input> Elementen erhebliche Vorteile in Bezug auf die Nutzerfreundlichkeit. Sie sind so konzipiert, dass sie in komplexen Inhalten leicht zu erkennen sind, und zeigen subtiles visuelles Feedback an, wenn der Nutzer mit ihnen interagiert.
MDC-Node-Modul installieren
Drücken Sie Ctrl + C, um den Entwicklungsserver zu beenden. Führen Sie dann folgenden Befehl aus:
npm install @material/textfield npm start
CSS-Code 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 das Element <input> 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 dann 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 schließlich alle drei Elemente mit Folgendem:
<div class="mdc-text-field">
...
</div>
Das resultierende Markup sollte so 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 "Adresse", "Ort" und "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 jetzt die Stile .crane-label und .crane-input aus _theme.scss entfernen, da sie nicht mehr verwendet werden.
JS-Code importieren
Fügen Sie oben in app.js die folgende Importanweisung hinzu:
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 so aktualisiert, dass sie Material Theming verwenden.
6. Zusammenfassung
Sie haben einige gängige Komponenten (Textfelder, Auswahl und Schaltfläche) ersetzt, ohne das Design Ihrer App komplett zu überarbeiten. Gut gemacht!
Weitere Komponenten, die ebenfalls einen großen Unterschied machen können, sind die obere App-Leiste und die Navigationsleiste.
Weiteres Vorgehen
Im MDC Web-Katalog finden Sie noch mehr Komponenten in MDC Web.
Wenn Sie MDC Web mit einem bestimmten Framework verwenden möchten, lesen Sie den Artikel MDC-112: MDC in Web-Frameworks einbinden.