MDC-101 Web: Grundlagen zu Material Components (MDC) (Web)

1. Einführung

Mit Material-Komponenten (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

Was sind Material Design und Material-Komponenten für das Web?

Material Design ist ein System zum Erstellen ansprechender und schöner digitaler Produkte. Durch die Zusammenführung von Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten können Produktteams ihr größtes Designpotenzial ausschöpfen.

Für Desktop und das mobile Web vereint Material Components Web (MDC Web) Design und Technik mit einer Bibliothek von Komponenten, die für Konsistenz zwischen Apps und Websites sorgen. Jede MDC Web-Komponente befindet sich in einem eigenen Node-Modul. So können diese Komponenten im Laufe der Weiterentwicklung des Material Design-Systems 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 Komponenten von MDC Web.

Was Sie erstellen

Dieses Codelab ist das erste von drei Codelabs, in denen Sie eine App namens Shrine erstellen. Dabei handelt es sich um eine E‑Commerce-Website, auf der Kleidung und Haushaltswaren verkauft werden. Sie erfahren, 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, eine für „Abbrechen“ und eine für „Weiter“
• Den Namen der Website (Shrine)
• Ein Bild des Shrine-Logos

Die zugehörigen Codelabs finden Sie unter:

• MDC-102: Struktur und Layout in Material Design
• MDC-103: Material Design-Theming mit Farbe, Form, Ebenentiefe und Typografie

Am Ende von MDC 103 haben Sie eine Website erstellt, die so aussieht:

MDC Web-Komponenten in diesem Codelab

• Textfeld
• Schaltfläche
• Welle

In diesem Codelab verwenden Sie die Standardkomponenten von MDC Web. Wie Sie sie anpassen, erfahren Sie in MDC-103: Material Design-Theming mit Farbe, Form, Ebenentiefe und Typografie.

Voraussetzungen

• Eine aktuelle Version von Node.js (im Lieferumfang enthalten ist npm, ein JavaScript-Paketmanager).
• Der Beispielcode (im nächsten Schritt herunterzuladen)
• Grundkenntnisse in HTML, CSS und JavaScript

Wir sind immer bestrebt, unsere Anleitungen zu verbessern. Wie würden Sie Ihre Kenntnisse in der Webentwicklung einschätzen?

Anfänger Fortgeschritten Experte

2. Entwicklungsumgebung einrichten

Starter-App für das Codelab herunterladen

Starter-App herunterladen

Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-101/starter. Wechseln Sie mit cd in dieses Verzeichnis, bevor Sie beginnen.

Beachten Sie das Suffix -master im Namen des Stammverzeichnisses. Wenn Sie die Starter-App über die Schaltfläche oben herunterladen, fügen Sie das Suffix -master an, wenn im Rest dieses Codelabs auf das Stammverzeichnis verwiesen wird.

...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-101/starter

Weitere Informationen: Repository aus GitHub klonen

Projektabhängigkeiten installieren

Führen Sie im Starter-Verzeichnis Folgendes aus:

npm install

Es wird viel Aktivität angezeigt und am Ende sollte im Terminal eine erfolgreiche Installation zu sehen sein:

Wenn nicht, führen Sie npm audit fix aus.

MDC Web verwendet einen CSS-Präprozessor namens Sass. Wenn Sie einen anderen CSS-Präprozessor verwenden (oder gar keinen), ist das kein Problem. Sie können Sass zusammen mit Ihrem aktuellen Präprozessor verwenden, indem Sie die sass CLI installieren oder ein Plug-in in Ihrer Build-Toolchain verwenden (z. B. sass-loader für Webpack, gulp-sass für Gulp oder grunt-sass für Grunt).

Damit unser Code in älteren Browsern wie IE 11 funktioniert, verwenden wir einen Transcompiler namens Babel, um die ES2015-JavaScript-Syntax von MDC Web in die ES5-JavaScript-Syntax zu transpilieren.

Wir verwenden Webpack, um unsere Dateien zu bündeln und unsere Website lokal bereitzustellen. Die Webpack-Konfiguration für dieses Projekt wurde bereits in der Datei webpack.config.js für Sie eingerichtet. Weitere Informationen zur Konfiguration finden Sie in der Kurzanleitung.

Starter-App ausführen

Führen Sie im selben Verzeichnis Folgendes aus:

npm start

Es ist hilfreich, npm start auf einem separaten Terminaltab oder in einem separaten Terminalfenster auszuführen, damit der lokale Server weiter ausgeführt werden kann, während wir den Code ändern.

Der webpack-dev-server wird gestartet. Rufen Sie in Ihrem Browser http://localhost:8080/ auf, um die Seite zu sehen.

Wenn Sie npm install oder npm start nicht erfolgreich ausführen konnten, beenden Sie den Vorgang und beheben Sie die Fehler in Ihrer Entwicklungsumgebung.

Fertig! Der Starter-Code 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 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 mit einem <link>-Tag die Datei bundle-login.css geladen, die von Webpack generiert wurde, und mit einem <script>-Tag wird die Datei bundle-login.js eingebunden. Außerdem verwenden wir normalize.css für ein konsistentes Rendering in allen Browsern sowie die Schriftart Roboto von Google Fonts.

Benutzerdefinierte Stile in login.scss

MDC Web-Komponenten werden mit Sass gestaltet, einer Erweiterungssprache für CSS. Sass wird mit Webpack in reguläres CSS kompiliert. Die Sass-Dateien in MDC Web sind in der Syntax SCSS geschrieben und haben Dateiendungen, die mit .scss enden.

MDC Web-Komponenten werden mit mdc-*-CSS-Klassen gestaltet, z. B. mit der Klasse mdc-text-field. (MDC Web behandelt die DOM-Struktur als Teil der öffentlichen API.)

Im Allgemeinen wird empfohlen, benutzerdefinierte Stiländerungen an Komponenten mit eigenen Klassen vorzunehmen. Möglicherweise sind Ihnen im obigen HTML-Code einige benutzerdefinierte CSS-Klassen aufgefallen, z. B. shrine-logo. Diese Stile sind 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;
}

Möglicherweise sind Ihnen auch home.scss und home.js aufgefallen. Diese werden im Codelab MDC-102 verwendet und können vorerst ignoriert werden.

Jetzt, da Sie mit dem Starter-Code vertraut sind, implementieren wir unsere erste Komponente.

3. Textfelder hinzufügen

Zuerst fügen wir unserer Anmeldeseite zwei Textfelder hinzu, in denen Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die MDC-Komponente „Textfeld“, die eine integrierte Funktion zum Anzeigen eines schwebenden Labels und zum Aktivieren einer Touch-Welle enthält.

Die Textfelder von Material Design wurden erheblich verbessert, um die Markenflexibilität zu erhöhen. Die Verbesserungen basieren auf umfangreichen UX-Studien (User Experience) für eine bessere Nutzerfreundlichkeit und ein besseres visuelles Design.

Weitere Informationen zu den verbesserten Textfeldern finden Sie im Artikel in den Material Guidelines.

MDC-Textfeld installieren

MDC Web-Komponenten werden über NPM-Pakete veröffentlicht. Führen Sie Folgendes aus, um das Paket für die Textfeldkomponente zu installieren:

npm install @material/textfield@^6.0.0

Sie können auch alle MDC Web-Komponenten gleichzeitig installieren, indem Sie Folgendes ausführen:

npm install material-components-web@^6.0.0

Weitere Informationen zur Verwendung des Master-MDC Web-Pakets finden Sie hier.

HTML-Code hinzufügen

Fügen Sie in index.html im Body-Bereich Folgendes in das <form> Element ein:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

Die DOM-Struktur des MDC-Textfelds besteht aus mehreren Teilen:

• Das Hauptelement mdc-text-field
• Die Unterelemente mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label und mdc-line-ripple

Hinweis: Der doppelte Unterstrich (__) und der doppelte Bindestrich (--) in diesen Selektornamen stammen aus dem BEM-Muster, einer Methode zur semantischen Strukturierung von CSS-Klassen. MDC Web folgt einer modifizierten Version dieses Musters, wie in diesem Codelab gezeigt.

CSS-Code hinzufügen

Fügen Sie in login.scss nach dem vorhandenen Import die folgende Importanweisung hinzu:

@import "@material/textfield/mdc-text-field";

Fügen Sie in derselben Datei die folgenden Stile hinzu, um die Textfelder auszurichten und zu zentrieren:

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

JavaScript-Code hinzufügen

Öffnen Sie login.js. Die Datei 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 Eingabe im Feld gültig ist oder einen Fehler enthält. Dazu werden Attribute verwendet, die von der Formularvalidierungs-API von HTML5 bereitgestellt werden.

…sollten Sie:

• Fügen Sie den required-Attribut zu den mdc-text-field__input-Elementen der Textfelder Nutzername und Passwort hinzu.
• Setzen Sie das minlength-Attribut des mdc-text-field__input-Elements des Textfelds Passwort auf "8".

Passen Sie die beiden <label class="mdc-text-field mdc-text-field--filled">-Elemente so an, dass sie so aussehen:

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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 Animation der Linienwelle (die untere Rahmenlinie, die sich nach außen ausbreitet) zu sehen:

Textfelder :

Das MDC-Textfeld verwendet ein natives HTML-<input>-Element und kann daher mit nativen <form>-Elementen in HTML verwendet werden.

• Das MDC-Textfeld spiegelt Hover- und Fokusstatus automatisch wider.
• Das MDC-Textfeld enthält viele Funktionen und Stilvarianten, z. B. Hilfetext, Symbolpaarung, eine umrandete Stilvariante und ein Textfeld. Sehen Sie sich diese hier an.

4. Schaltflächen hinzufügen

Als Nächstes fügen wir unserer Anmeldeseite zwei Schaltflächen hinzu: „Abbrechen“ und „Weiter“. Wir verwenden die MDC-Komponente „Schaltfläche“ zusammen mit der MDC-Komponente „Welle“, um den typischen Material Design-Tintenwelleneffekt 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@^6.0.0

HTML-Code hinzufügen

Fügen Sie in index.html Folgendes unter dem schließenden Tag des Elements <label class="mdc-text-field mdc-text-field--filled password"> ein:

<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 eine erhöhte Stilvariante, die durch die Klasse mdc-button--raised angegeben wird.

Um sie später einfach auszurichten, umschließen wir die beiden mdc-button-Elemente mit einem <div>-Element.

Hinweis: Für die MDC-Schaltflächenkomponente in MDC Web ist kein JavaScript erforderlich. Dadurch ist sie leichter und schneller zu verwenden, wenn die Netzwerkverbindung eingeschränkt ist.

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 Stile hinzu, um die Schaltflächen auszurichten und einen Abstand um sie herum hinzuzufügen:

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

Tintenwelle zu den Schaltflächen hinzufügen

Wenn der Nutzer auf eine Schaltfläche tippt oder klickt, sollte eine Tintenwelle als Feedback angezeigt werden. Für die Tintenwellenkomponente ist JavaScript erforderlich. Wir fügen es also der Seite hinzu.

Führen Sie Folgendes aus, um das Paket für die Wellenkomponente zu installieren:

npm install @material/ripple@^6.0.0

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 Wellen zu instanziieren:

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

Da wir keinen Verweis auf die Welleninstanz benötigen, müssen wir sie keiner Variablen zuweisen.

Jetzt weißt du Bescheid. Aktualisieren Sie die Seite. Wenn Sie auf eine Schaltfläche klicken, wird eine Tintenwelle angezeigt.

Es gibt viele weitere Stilvarianten der MDC-Schaltfläche, z. B. „Unelevated“ und „Umrandet“. Sehen Sie sich diese hier an.

Geben Sie gültige Werte in die Textfelder ein und klicken Sie auf die Schaltfläche „Weiter“. Geschafft! In MDC-102 arbeiten Sie auf dieser Seite weiter.

Hinweis:Für diese Übung wird das Formular über HTTP GET gesendet und es erfolgt keine serverseitige Verarbeitung. Auf jeder Produktionswebsite oder in jeder Produktionsanwendung wird HTTP POST verwendet (indem method="POST" dem <form> Element hinzugefügt wird), um Daten an einen Serverendpunkt zu senden und Anmeldeinformationen zu bestätigen.

5. Zusammenfassung

Mit grundlegender HTML-Auszeichnung und nur wenigen Zeilen CSS- und JavaScript-Code haben Sie mit der Bibliothek „Material-Komponenten für das Web“ eine ansprechende Anmeldeseite erstellt, die den Material Design-Richtlinien entspricht und auf allen Geräten einheitlich aussieht und sich einheitlich verhält.

Die fertige MDC-101-App ist in diesem Verzeichnis verfügbar: material-components-web-codelabs/mdc-101/complete

Sie können Ihre Version der Seite mit der Seite in diesem Verzeichnis vergleichen. Vergessen Sie nicht, zuerst npm install in diesem Verzeichnis auszuführen.

Weiteres Vorgehen

Textfeld, Schaltfläche und Welle sind drei Kernkomponenten in der MDC Web-Bibliothek, aber es gibt noch viele mehr. Sie können auch die anderen Komponenten in MDC Web erkunden.

In MDC-102: Struktur und Layout in Material Design erfahren Sie mehr über die Navigationsleiste und die Bilderliste. Vielen Dank, dass Sie Material-Komponenten ausprobiert haben. Wir hoffen, dieses Codelab hat Ihnen gefallen.

Ich konnte dieses Codelab mit einem angemessenen Zeit- und Arbeitsaufwand abschließen.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu

Ich möchte Material-Komponenten auch in Zukunft verwenden.

Stimme voll und ganz zu Stimme zu Neutral Stimme nicht zu Stimme überhaupt nicht zu