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 |
Was sind Material Design und Material-Komponenten für das Web?
Material Design ist ein System zum Erstellen ansprechender digitaler Produkte. Wenn Stil, Branding, Interaktion und Bewegung unter einer einheitlichen Reihe von Prinzipien und Komponenten vereint werden, können Produktteams ihr größtes Designpotenzial entfalten.
Für Computer und das mobile Web vereint Material Components Web (MDC Web) Design und Entwicklung mit einer Bibliothek von Komponenten, die für Konsistenz zwischen Apps und Websites sorgen. MDC Web-Komponenten befinden sich jeweils in eigenen Knotenmodulen. Wenn sich das Material Design-System weiterentwickelt, können diese Komponenten also ganz einfach aktualisiert werden, um eine konsistente, pixelgenaue Implementierung und die Einhaltung der Google-Standards für die Frontend-Entwicklung zu gewährleisten. MDC ist auch für Android, iOS und Flutter verfügbar.
In diesem Codelab erstellen Sie eine Anmeldeseite mit mehreren MDC Web-Komponenten.
Umfang
Dieses Codelab ist das erste von drei Codelabs, in denen Sie eine App namens Shrine erstellen. Das ist eine E-Commerce-Website, auf der Kleidung und Haushaltswaren verkauft werden. Darin wird gezeigt, wie Sie Komponenten mit MDC Web an jede Marke oder jeden Stil anpassen können.
In diesem Codelab erstellen Sie eine Anmeldeseite für Shrine, die Folgendes enthält:
- Zwei Textfelder, eines für die Eingabe eines Nutzernamens und das andere für ein Passwort
- Zwei Schaltflächen: „Abbrechen“ und „Weiter“
- Der Name der Website (Shrine)
- Ein Bild des Shrine-Logos
MDC Web-Komponenten in diesem Codelab
- Textfeld
- Schaltfläche
- Welle
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
Wir arbeiten laufend daran, unsere Tutorials zu verbessern. Wie würden Sie Ihre Erfahrung mit der Webentwicklung bewerten?
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-101/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-101/starter
Projektabhängigkeiten installieren
Führen Sie im Startverzeichnis folgenden Befehl aus:
npm install
Sie sehen dann viele Aktivitäten und am Ende sollte in Ihrem Terminal eine erfolgreiche Installation angezeigt werden:
Ist das nicht der Fall, führen Sie npm audit fix aus.
Start-App ausführen
Führen Sie im selben Verzeichnis folgenden Befehl aus:
npm start
Die webpack-dev-server beginnt. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite aufzurufen.
Fertig! Der Startercode für die Anmeldeseite von Shrine sollte in Ihrem Browser ausgeführt werden. Sie sollten den Namen „Shrine“ und das Shrine-Logo direkt darunter sehen.
Code ansehen
Metadaten in index.html
Öffnen Sie im Startverzeichnis die Datei index.html mit Ihrem bevorzugten Code-Editor. Sie sollte Folgendes enthalten:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>Hier wird mit einem <link>-Tag die von webpack generierte Datei bundle-login.css geladen und mit einem <script>-Tag die Datei bundle-login.js eingebunden. Außerdem verwenden wir normalize.css für ein einheitliches browserübergreifendes Rendering sowie die Roboto-Schriftart von Google Fonts.
Benutzerdefinierte Designs in login.scss
MDC Web-Komponenten werden mit mdc-*-CSS-Klassen formatiert, z. B. mit der Klasse mdc-text-field. (Bei MDC Web wird die DOM-Struktur als Teil der öffentlichen API behandelt.)
Im Allgemeinen wird empfohlen, benutzerdefinierte Stiländerungen an Komponenten mit eigenen Klassen vorzunehmen. Vielleicht haben Sie im obigen HTML-Code einige benutzerdefinierte CSS-Klassen wie shrine-logo bemerkt. Diese Stile werden in login.scss definiert, um der Seite grundlegende Stile hinzuzufügen.
Öffnen Sie login.scss. Dort sehen Sie die folgenden Stile für die Anmeldeseite:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}Nachdem Sie sich mit dem Startcode vertraut gemacht haben, implementieren wir nun unsere erste Komponente.
Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in die Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die MDC-Komponente „Textfeld“, die integrierte Funktionen zum Anzeigen eines schwebenden Labels und zum Aktivieren eines Touch-Ripple-Effekts enthält.
Installieren Sie das MDC-Textfeld.
MDC Web-Komponenten werden über NPM-Pakete veröffentlicht. Führen Sie den folgenden Befehl aus, um das Paket für die Komponente „Textfeld“ zu installieren:
npm install @material/textfield
HTML hinzufügen
Fügen Sie in index.html Folgendes in das <form>-Element im Text ein:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username">
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>Die DOM-Struktur des MDC-Textfelds besteht aus mehreren Teilen:
- Das Hauptelement
mdc-text-field - Unterelemente
mdc-text-field__input,mdc-floating-labelundmdc-line-ripple
CSS-Code hinzufügen
Fügen Sie in login.scss die folgende Importanweisung nach dem vorhandenen Import hinzu:
@import "@material/textfield/mdc-text-field";Fügen Sie in derselben Datei die folgenden Formatierungen hinzu, um die Textfelder auszurichten und zu zentrieren:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}JavaScript hinzufügen
Öffnen Sie login.js. Das Feld ist derzeit leer. Fügen Sie den folgenden Code hinzu, um die Textfelder zu importieren und zu instanziieren:
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));HTML5-Validierung hinzufügen
Textfelder geben an, ob die Feldeingabe gültig ist oder einen Fehler enthält. Dazu werden Attribute verwendet, die von der HTML5-API zur Formularvalidierung bereitgestellt werden.
…solltest du:
- Fügen Sie das Attribut
requiredzu denmdc-text-field__input-Elementen der Textfelder Nutzername und Passwort hinzu. - Legen Sie das Attribut
minlengthdes Elementsmdc-text-field__inputdes Textfelds Passwort auf"8"fest.
Passen Sie die beiden <div class="mdc-text-field">-Elemente so an:
<div class="mdc-text-field username">
<input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
<label class="mdc-floating-label" for="username-input">Username</label>
<div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
<input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
<label class="mdc-floating-label" for="password-input">Password</label>
<div class="mdc-line-ripple"></div>
</div>Aktualisieren Sie die Seite unter http://localhost:8080/. Sie sollten jetzt eine Seite mit zwei Textfeldern für Nutzername und Passwort sehen.
Klicken Sie auf die Textfelder, um die Animation des schwebenden Labels und die Line-Ripple-Animation (die untere Grenzlinie, die sich nach außen wölbt) zu sehen:
Als Nächstes fügen wir unserer Anmeldeseite zwei Schaltflächen hinzu: „Abbrechen“ und „Weiter“. Wir verwenden die MDC-Schaltflächenkomponente zusammen mit der MDC-Ripple-Komponente, um den ikonischen Material Design-Tinten-Ripple-Effekt zu erzielen.
MDC-Schaltfläche installieren
Führen Sie Folgendes aus, um das Paket für die Schaltflächenkomponente zu installieren:
npm install @material/button
HTML hinzufügen
Fügen Sie in index.html Folgendes unter dem schließenden Tag des <div class="mdc-text-field password">-Elements hinzu:
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>Für die Schaltfläche „Abbrechen“ verwenden wir den Standardstil. Die Schaltfläche „Weiter“ verwendet jedoch die Stilvariante raised, die durch die Klasse mdc-button--raised angegeben wird.
Damit wir sie später leichter ausrichten können, fassen wir die beiden mdc-button-Elemente in einem <div>-Element zusammen.
CSS-Code hinzufügen
Fügen Sie in login.scss nach den vorhandenen Importen die folgende Importanweisung hinzu:
@import "@material/button/mdc-button";Fügen Sie login.scss die folgenden Formatierungen hinzu, um die Schaltflächen auszurichten und einen Rand um sie herum einzufügen:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}Schaltflächen mit einem Tinten-Ripple-Effekt versehen
Wenn der Nutzer eine Schaltfläche berührt oder darauf klickt, sollte ein Feedback in Form eines Tinteneffekts angezeigt werden. Für die Komponente „Ink Ripple“ ist JavaScript erforderlich. Wir fügen es also der Seite hinzu.
Führen Sie Folgendes aus, um das Paket für die Ripple-Komponente zu installieren:
npm install @material/ripple
Fügen Sie oben in login.js die folgende Importanweisung hinzu:
import {MDCRipple} from '@material/ripple';Fügen Sie login.js Folgendes hinzu, um die Ripples zu instanziieren:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Da wir keinen Verweis auf die Ripple-Instanz beibehalten müssen, ist es nicht erforderlich, sie einer Variablen zuzuweisen.
Geschafft! Aktualisieren Sie die Seite. Beim Klicken auf die einzelnen Schaltflächen wird ein Tinteneffekt angezeigt.
Geben Sie gültige Werte in die Textfelder ein und klicken Sie auf die Schaltfläche „WEITER“. Geschafft! Sie arbeiten auf dieser Seite in MDC-102 weiter.
Mit der Bibliothek „Material Components for the web“ konnten Sie mithilfe von einfachem HTML-Markup und nur wenigen Zeilen CSS- und JavaScript-Code eine ansprechende Anmeldeseite erstellen, die den Material Design-Richtlinien entspricht und auf allen Geräten einheitlich aussieht und sich einheitlich verhält.
Weiteres Vorgehen
„Text Field“, „Button“ und „Ripple“ sind drei Kernkomponenten in der MDC Web-Bibliothek. Es gibt aber noch viele weitere. Sie können sich auch die anderen Komponenten in MDC Web ansehen.
Weitere Informationen zum Navigationsmenü und zur Bildliste finden Sie unter MDC-102: Material Design Structure and Layout. Vielen Dank, dass Sie Material Components ausprobiert haben. Wir hoffen, dieses Codelab hat Ihnen gefallen.