Material Components (MDC) ermöglichen Entwicklern die Implementierung von Material Design. Das MDC wurde von einem Team aus Entwickler:innen und UX-Designern bei Google erstellt und bietet Dutzende schöne und funktionale UI-Komponenten, die für Android, iOS, Web und Flutter verfügbar sind. material.io/develop |
Was sind Materialdesign und Materialkomponenten für das Web?
Material Design ist ein System zur Erstellung ausdrucksstarker und schöner digitaler Produkte. Durch die Kombination von Stil, Branding, Interaktion und Bewegung unter Berücksichtigung aller Grundsätze und Komponenten können Produktteams ihr größtes Designpotenzial ausschöpfen.
Bei Material Components Web (MDC Web) für Computer und das mobile Web sind Design und Entwicklung in einer Bibliothek mit Komponenten vereint, die für eine einheitliche Nutzung von Apps und Websites sorgen. MDC-Webkomponenten befinden sich jeweils in eigenen Knotenmodulen, die sich im Zuge der Weiterentwicklung des Material Design-Systems problemlos aktualisieren lassen. So sind eine konsistente Pixel-Implementierung und die Einhaltung der Front-End-Entwicklungsstandards von Google möglich. MDC ist auch für Android, iOS und Flutter verfügbar.
In diesem Codelab erstellen Sie eine Anmeldeseite mit mehreren MDC-Komponenten.
Inhalte, die Sie erstellen werden
Dieses Codelab ist das erste von drei Codelabs, bei denen du durch die Erstellung einer App namens Shrine geführt wirst. Diese E-Commerce-Website verkauft Kleidung und Haushaltswaren. Dort erfahren Sie, wie Sie Komponenten so anpassen können, dass sie die Marke oder den Stil über den MDC wiedergeben.
In diesem Codelab erstellen Sie eine Anmeldeseite für den Schrein, der Folgendes enthält:
- Zwei Textfelder, eines zur Eingabe eines Nutzernamens und eines für ein Passwort
- Zwei Tasten, eine für „Abbrechen“ und eine für „Weiter“
- Der Name der Website (Schrein)
- Logo von Shrine'
MDC-Webkomponenten in diesem Codelab
- Textfeld
- Schaltfläche
- Gekräuselte
Voraussetzungen
- Eine aktuelle Version von Node.js, die mit dem JavaScript-Paketmanager npm geliefert wird.
- Beispielcode, der im nächsten Schritt heruntergeladen werden soll
- Grundkenntnisse in HTML, CSS und JavaScript
Wir arbeiten laufend daran, unsere Anleitungen zu verbessern. Wie würdest du deine Erfahrung mit der Webentwicklung bewerten?
Start der Codelab-App herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-101/starter. Achten Sie darauf, vor dem Start cd in dieses Verzeichnis zu schreiben.
...oder von 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-101/starter
Projektabhängigkeiten installieren
Führen Sie im Starter-Verzeichnis den folgenden Befehl aus:
npm install
Sie sehen dann eine Menge an Aktivitäten und Ihr Terminal sollte am Ende eine Installation ausführen:
Falls das nicht der Fall ist, führen Sie npm audit fix aus.
Starter-App ausführen
Führen Sie im selben Verzeichnis Folgendes aus:
npm start
webpack-dev-server wird gestartet. Rufen Sie http://localhost:8080/ in Ihrem Browser auf, um die Seite aufzurufen.
Fertig! Der Starter-Code für die Anmeldeseite von Shrine sollte in Ihrem Browser ausgeführt werden. Jetzt sollten der Name „Schrein“ und direkt daneben das Schrein-Logo angezeigt werden.
Code ansehen
Metadaten in index.html
Öffnen Sie im Starter-Verzeichnis 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 ein <link>-Tag verwendet, um die von Webpack generierte bundle-login.css-Datei zu laden. Ein <script>-Tag enthält die bundle-login.js-Datei. Zusätzlich fügen wir normalize.css für ein einheitliches browserübergreifendes Rendering sowie die Roboto-Schriftart aus Google Fonts hinzu.
Benutzerdefinierte Stile in login.scss
MDC-Komponenten werden mithilfe von mdc-*-CSS-Klassen gestaltet, z. B. die Klasse mdc-text-field. (MDC Web behandelt seine DOM-Struktur als Teil der öffentlichen API.)
Im Allgemeinen empfehlen wir, benutzerdefinierte Stiländerungen an Komponenten mit Ihren eigenen Klassen vorzunehmen. Möglicherweise haben Sie in der HTML-Datei oben benutzerdefinierte CSS-Klassen wie shrine-logo bemerkt. Diese Stile sind in login.scss definiert, um der Seite grundlegende Stile hinzuzufügen.
Öffne login.scss und sie zeigt die folgenden Designs für die Anmeldeseite:
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}Jetzt, da Sie mit dem Startcode vertraut sind, wollen wir unsere erste Komponente implementieren.
Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in die Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die Komponente „MDC-Textfeld“, die eine integrierte Funktion enthält, mit der ein unverankertes Label angezeigt wird und eine Touch-Ritte aktiviert wird.
Installieren Sie das MDC-Textfeld.
MDC-Webkomponenten werden über NPM-Pakete veröffentlicht. Führen Sie folgenden Befehl aus, um das Paket für die Textfeldkomponente zu installieren:
npm install @material/textfield
HTML hinzufügen
Füge in index.html das folgende <form>-Element im Text hinzu:
<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
Preisvergleichsportal 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 Stile ein, um die Textfelder auszurichten und zu zentrieren:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}JavaScript hinzufügen
Öffnen Sie login.js, das momentan leer ist. 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 ausdrücken, ob die Feldeingabe gültig ist oder fehlerhaft ist. Dazu werden Attribute verwendet, die von der HTML5 API für die Formularvalidierung bereitgestellt werden.
…solltest du:
- Fügen Sie das
required-Attribut in diemdc-text-field__input-Elemente der Textfelder Nutzername und Passwort ein - Legen Sie das
minlength-Attribut desmdc-text-field__input-Elements des Textfelds Password (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/. Es sollte jetzt eine Seite mit zwei Textfeldern für Nutzername und Passwort angezeigt werden.
Klicken Sie auf die Textfelder, um die Floating-Label-Animation und die Linien-Ripple-Animation (untere Randlinie nach außen) anzusehen:
Nun fügen wir der Anmeldeseite zwei Schaltflächen hinzu: „Abbrechen“ und „Weiter“. Wir verwenden die Komponente „MDC-Schaltfläche“ zusammen mit der „MDC-Rille“, um den charakteristischen Tintenwelleneffekt zu füllen.
Schaltfläche „DC-Installation“ installieren
Führen Sie den folgenden Befehl aus, um das Paket für die Schaltfläche zu installieren:
npm install @material/button
HTML hinzufügen
Füge in index.html unter dem schließenden Tag des Elements <div class="mdc-text-field password"> Folgendes 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“ gilt das Standardformat für Schaltflächen. Für die Schaltfläche „Weiter“ wird jedoch eine erweiterte Variante verwendet, die durch die Klasse mdc-button--raised angegeben wird.
Damit sie später besser ausgerichtet werden können, werden die beiden mdc-button-Elemente in einem <div>-Element zusammengefasst.
Preisvergleichsportal hinzufügen
Fügen Sie in login.scss nach den vorhandenen Importen die folgende Importanweisung hinzu:
@import "@material/button/mdc-button";Wenn Sie die Schaltflächen ausrichten und einen Rand hinzufügen möchten, fügen Sie login.scss die folgenden Stile hinzu:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}Fügen Sie den Schaltflächen eine Tintenwelle hinzu.
Wenn der Nutzer auf eine Schaltfläche tippt oder klickt, sollte Feedback in Form eines Tintenwellensymbols angezeigt werden. Für die Komponente „Tintenwellen“ ist JavaScript erforderlich. Daher wird es der Seite hinzugefügt.
Führen Sie folgenden Befehl aus, um das Paket für die Wellenkomponente 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 den folgenden Befehl hinzu, um die Wellen zu instanziieren:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Da ein Verweis auf den Wellenvorgang nicht beibehalten werden muss, muss er keiner Variable zugewiesen werden.
Fertig! Aktualisieren Sie die Seite. Jedes Mal, wenn Sie auf eine Schaltfläche klicken, wird ein Farbtupfer angezeigt.
Füllen Sie die Textfelder mit gültigen Werten aus und drücken Sie auf „Weiter“. Geschafft! Sie arbeiten auf MDC-102 auf dieser Seite weiter.
Mit einfachen HTML-Markups und nur wenigen Zeilen von CSS und JavaScript haben die Komponenten für die Webbibliothek eine ansprechende Anmeldeseite erstellt, die den Richtlinien für Material Design entspricht und auf allen Geräten einheitlich aussieht und funktioniert.
Nächste Schritte
Textfelder, Schaltflächen und Wellenzahlen sind drei Hauptkomponenten in der MDC-Webbibliothek, es gibt jedoch noch viele weitere. Sie können sich auch die anderen Komponenten auf MDC Web ansehen.
Unter MDC-102: Material Design Struktur und Layout finden Sie weitere Informationen zur Navigationsleiste und zur Bildliste. Vielen Dank, dass Sie Material Komponenten ausprobiert haben. Wir hoffen, dass dir dieses Codelab gefallen hat.