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

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

Informationen zu diesem Codelab

subjectZuletzt aktualisiert: Okt. 11, 2020
account_circleVerfasst von Liz Mitchell, Abhinay Omkar

1. Einführung

logo_components_color_2x_web_96dp.png

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.

Was sind Material Design und Material Components für das Web?

Material Design ist ein System zum Erstellen ausdrucksstarker und ansprechender digitaler Produkte. Indem sie Stil, Branding, Interaktion und Bewegung unter einem einheitlichen Satz von Prinzipien und Komponenten vereinen, können Produktteams ihr größtes Designpotenzial ausschöpfen.

Für Computer und das mobile Web vereint Material Components Web (MDC Web) Design und Entwicklung mit einer Komponentenbibliothek, um für Konsistenz in Apps und Websites zu sorgen. MDC-Webkomponenten befinden sich jeweils in eigenen Knotenmodulen. Diese Komponenten können im Zuge der Weiterentwicklung des Material Design-Systems einfach aktualisiert werden, um eine konsistente Pixel-perfekte Implementierung und die Einhaltung der Google-Frontend-Entwicklungsstandards sicherzustellen. MDC ist auch für Android, iOS und Flutter verfügbar.

In diesem Codelab erstellen Sie eine Anmeldeseite mit verschiedenen MDC-Webkomponenten.

Inhalt

Dieses Codelab ist das erste von drei Codelabs, in dem du die App Shrine entwickelst. Das ist eine E-Commerce-Website für Kleidung und Haushaltswaren. Es wird gezeigt, wie Sie Komponenten mithilfe von MDC Web an jede Marke oder jeden Stil anpassen können.

In diesem Codelab erstellst du eine Anmeldeseite für Shrine, die Folgendes enthält:

  • Zwei Textfelder, eines zum Eingeben eines Nutzernamens und eines für ein Passwort
  • Zwei Schaltflächen, eine für „Abbrechen“ und eine für „Weiter“
  • Der Name der Website (Schrein)
  • Bild des Shrine-Logos

674d1ca8cfa98c9.png

MDC-Webkomponenten in diesem Codelab

  • Textfeld
  • Schaltfläche
  • Welle

Voraussetzungen

  • Eine aktuelle Version von Node.js, die im JavaScript-Paketmanager npm enthalten ist
  • Der Beispielcode (wird im nächsten Schritt heruntergeladen)
  • Grundkenntnisse in HTML, CSS und JavaScript
<ph type="x-smartling-placeholder">

Wir arbeiten ständig daran, unsere Anleitungen zu verbessern. Wie würden Sie Ihre Erfahrung mit Webentwicklung bewerten?

2. Entwicklungsumgebung einrichten

Starter-Codelab-App herunterladen

Die Start-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-101/starter. Achten Sie darauf, dass Sie sich in diesem Verzeichnis cd befinden, bevor Sie beginnen.

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

Projektabhängigkeiten installieren

Führen Sie im Startverzeichnis folgenden Befehl aus:

npm install

Es werden zahlreiche Aktivitäten angezeigt. Am Ende sollte das Terminal eine erfolgreiche Installation anzeigen:

204c063d8fd78f94.png

Ist dies nicht der Fall, führen Sie npm audit fix aus.

Starter-App ausführen

Führen Sie im selben Verzeichnis folgenden Befehl aus:

npm start

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

17c139dc5a9bebaf.png

Fertig! Der Startcode für die Anmeldeseite von Shrine sollte in deinem Browser ausgeführt werden. Du solltest den Namen „Schrein“ sehen und das Shrine-Logo direkt darunter.

f7e3f354df8d84b8.png

Code ansehen

Metadaten in index.html

Öffnen Sie im Startverzeichnis 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, und ein <script>-Tag enthält die bundle-login.js-Datei. Darüber hinaus fügen wir normalize.css für ein einheitliches browserübergreifendes Rendering sowie die Roboto-Schriftart von Google Fonts hinzu.

Benutzerdefinierte Stile in login.scss

MDC-Webkomponenten werden mithilfe von mdc-*-CSS-Klassen wie der Klasse mdc-text-field gestaltet. (MDC Web behandelt seine DOM-Struktur als Teil seiner öffentlichen API.)

Im Allgemeinen empfiehlt es sich, benutzerdefinierte Stiländerungen an Komponenten mithilfe Ihrer eigenen Klassen vorzunehmen. Vielleicht sind Ihnen im obigen HTML-Code einige benutzerdefinierte CSS-Klassen aufgefallen, z. B. shrine-logo. Diese Stile werden in login.scss definiert, um der Seite grundlegende Stile hinzuzufügen.

Öffnen Sie login.scss. Sie sehen die folgenden Stile für die Anmeldeseite:

@import "./common";

.header {
 
text-align: center;
}

.shrine-logo {
 
width: 150px;
 
height: 150px;
 
padding-top: 80px;
 
fill: currentColor;
}

Da Sie nun mit dem Startcode vertraut sind, können wir unsere erste Komponente implementieren.

3. Textfelder hinzufügen

Zunächst fügen wir zwei Textfelder zu unserer Anmeldeseite hinzu, in die die Nutzer ihren Nutzernamen und ihr Passwort eingeben können. Wir verwenden die MDC-Textfeldkomponente, die eine integrierte Funktion enthält, die eine unverankerte Beschriftung anzeigt und eine Berührungswelle aktiviert.

9ad8a7db0b50f07d.png

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@^6.0.0

HTML hinzufügen

Fügen Sie in index.html im Body Folgendes innerhalb des <form>-Elements 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
  • Unterelemente mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label und mdc-line-ripple

CSS 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 hinzufügen

login.js öffnen, der 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 geben an, ob die Feldeingabe gültig ist oder einen Fehler enthält. Dazu werden Attribute der Formularvalidierungs-API von HTML5 verwendet.

…solltest du:

  • Fügen Sie das Attribut required in die mdc-text-field__input-Elemente der Textfelder Nutzername und Passwort ein.
  • Legen Sie das Attribut minlength des Elements mdc-text-field__input des Textfelds Passwort auf "8" fest.

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

<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/. Es sollte nun eine Seite mit zwei Textfeldern für Nutzername und Passwort angezeigt werden.

Klicken Sie auf die Textfelder, um sich die Animation des unverankerten Labels und die Animation der Linienwelle (die untere Rahmenlinie, die nach außen verläuft) anzusehen:

c0b341e9949a6183.gif

4. Schaltflächen hinzufügen

Als Nächstes fügen wir zwei Schaltflächen zu unserer Anmeldeseite hinzu: "Abbrechen". und „Weiter“. Wir verwenden die MDC Button-Komponente zusammen mit der MDC Ripple-Komponente, um den ikonischen Tinten-Ripple-Effekt von Material Design fertigzustellen.

674d1ca8cfa98c9.png

Schaltfläche „MDC installieren“

Führen Sie folgenden Befehl aus, um das Paket für die Schaltflächenkomponente zu installieren:

npm install @material/button@^6.0.0

HTML hinzufügen

Fügen Sie in index.html unter dem schließenden Tag des <label class="mdc-text-field mdc-text-field--filled password">-Elements Folgendes 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 das Feld „Abbrechen“ verwenden wir den Standardstil für Schaltflächen. Die „Weiter“-Schaltfläche verwendet eine Variante des Stils erhaben, was durch die Klasse mdc-button--raised angegeben wird.

Um sie später einfacher auszurichten, fassen wir die beiden mdc-button-Elemente in einem <div>-Element zusammen.

CSS 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;
}

Schaltflächen eine Wellenlinie hinzufügen

Wenn Nutzende eine Schaltfläche berühren oder anklicken, sollte sie Feedback in Form einer Tintenwelle anzeigen. Die Tinten-Ripple-Komponente erfordert JavaScript, daher fügen wir es der Seite hinzu.

Führen Sie folgenden Befehl aus, um das Paket für die Ripple-Komponente 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 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 auch nicht nötig, ihn einer Variablen zuzuweisen.

Fertig! Aktualisieren Sie die Seite. Wenn Sie auf die einzelnen Schaltflächen klicken, wird eine Wellen der Tinte angezeigt.

bb19b0a567977bde.gif

Geben Sie gültige Werte in die Textfelder ein und klicken Sie auf „WEITER“. Schaltfläche. Geschafft! Sie werden auf dieser Seite in MDC-102 weiterarbeiten.

5. Zusammenfassung

Mithilfe von einfachem HTML-Markup und einigen CSS- und JavaScript-Zeilen haben Sie mithilfe von Material Components for the Web Library eine ansprechende Anmeldeseite erstellt, die den Material Design-Richtlinien entspricht und auf allen Geräten einheitlich aussieht und funktioniert.

Weiteres Vorgehen

Textfeld, Schaltfläche und Ripple sind drei Kernkomponenten der MDC-Webbibliothek, es gibt jedoch noch viele weitere. Sie können sich auch die übrigen Komponenten von MDC Web ansehen.

Rufen Sie MDC-102: Material Design Structure and Layout auf, um mehr über die Navigationsleiste und die Bildliste zu erfahren. Vielen Dank, dass Sie Material Components ausprobieren. Wir hoffen, dieses Codelab hat Ihnen gefallen.

<ph type="x-smartling-placeholder"> <ph type="x-smartling-placeholder">

Ich konnte dieses Codelab mit angemessenem Zeit- und Arbeitsaufwand abschließen

Ich möchte Material Components weiterhin verwenden.