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 |
MDC Web ist so konzipiert, dass es in jedes Frontend-Framework integriert werden kann und gleichzeitig die Prinzipien von Material Design beachtet. In diesem Codelab erfahren Sie, wie Sie eine React-Komponente erstellen, die MDC Web als Grundlage verwendet. Die in diesem Codelab erlernten Prinzipien können auf jedes JavaScript-Framework angewendet werden.
So ist MDC Web aufgebaut
Die JavaScript-Ebene von MDC Web besteht aus drei Klassen pro Komponente: Component, Foundation und Adapter. Dieses Muster verleiht MDC Web die Flexibilität, sich in Frontend-Frameworks zu integrieren.
Die Foundation enthält die Geschäftslogik, mit der Material Design implementiert wird. Die Foundation verweist nicht auf HTML-Elemente. So können wir die HTML-Interaktionslogik in den Adapter abstrahieren. Foundation hat einen Adapter.
Der Adapter ist eine Schnittstelle. Die Adapterschnittstelle wird von der Foundation referenziert, um die Geschäftslogik von Material Design zu implementieren. Sie können den Adapter in verschiedenen Frameworks wie Angular oder React implementieren. Eine Implementierung eines Adapters interagiert mit der DOM-Struktur.
Die Component hat eine Foundation und ihre Aufgabe ist es,
- den Adapter mit Framework-unabhängigem JavaScript zu implementieren und
- öffentliche Methoden bereitzustellen, die als Proxy für Methoden in der Foundation dienen.
Funktionen von MDC Web
Jedes Paket in MDC Web enthält eine Component, Foundation und Adapter. Um eine Komponente zu instanziieren, müssen Sie das Stamm-element an die Konstruktormethode der Komponente übergeben. Die Component implementiert einen Adapter, der mit den DOM- und HTML-Elementen interagiert. Die Component instanziiert dann die Foundation, die die Adapter-Methoden aufruft.
Wenn Sie MDC Web in ein Framework einbinden möchten, müssen Sie eine eigene Component in der Sprache/Syntax des Frameworks erstellen. Die Component des Frameworks implementiert den Adapter von MDC Web und verwendet die Foundation von MDC Web.
Was Sie erstellen
In diesem Codelab wird gezeigt, wie Sie einen benutzerdefinierten Adapter erstellen, um die Foundation -Logik zu verwenden und eine React-Komponente für Material Design zu erhalten. Es werden die erweiterten Themen unter In Frameworks einbinden behandelt. In diesem Codelab wird React als Beispiel-Framework verwendet, dieser Ansatz kann aber auf jedes andere Framework angewendet werden.
In diesem Codelab erstellen Sie die obere App-Leiste und die Demoseite für die obere App-Leiste Demo-Seite. Das Layout der Demoseite ist bereits eingerichtet, sodass Sie direkt mit der oberen App-Leiste beginnen können. Die obere App-Leiste enthält:
- Navigationssymbol
- Maßnahmen
- Es sind vier Varianten verfügbar: Short, always collapsed, fixed und prominent.
Voraussetzungen:
- Eine aktuelle Version von Node.js (mit npm, einem JavaScript-Paketmanager)
- Der Beispielcode (im nächsten Schritt herunterladen)
- Grundkenntnisse in HTML, CSS, JavaScript und React
Wie erfahren sind Sie in der Webentwicklung?
2. Entwicklungsumgebung einrichten
Starter-App für das Codelab herunterladen
Die Starter-App befindet sich im Verzeichnis material-components-web-codelabs-master/mdc-112/starter.
...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-112/starter
Projektabhängigkeiten installieren
Führen Sie im Starter-Verzeichnis material-components-web-codelabs/mdc-112/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 selben 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! Der Starter-Code für die Demoseite der oberen App-Leiste von React sollte in Ihrem Browser ausgeführt werden. Sie sollten eine Wand mit Lorem ipsum-Text, ein Feld Controls (unten rechts) und eine unfertige obere App-Leiste sehen:
Code und Projekt ansehen
Wenn Sie den Code-Editor öffnen, sollte das Projektverzeichnis in etwa so aussehen:
Öffnen Sie die Datei App.js und sehen Sie sich die Methode render an, die die Komponente <TopAppBar> enthält:
App.js
render() {
const {isFixed, isShort, isRtl, isProminent, isAlwaysCollapsed, shouldReinit} = this.state;
return (
<section
dir={isRtl ? 'rtl' : 'ltr'}
className='mdc-typography'>
{
shouldReinit ? null :
<TopAppBar
navIcon={this.renderNavIcon()}
short={isShort}
prominent={isProminent}
fixed={isFixed}
alwaysCollapsed={isAlwaysCollapsed}
title='Mountain View, CA'
actionItems={this.actionItems}
/>
}
<div className={classnames('mdc-top-app-bar--fixed-adjust', {
'mdc-top-app-bar--short-fixed-adjust': isShort || isAlwaysCollapsed,
'mdc-top-app-bar--prominent-fixed-adjust': isProminent,
})}>
{this.renderDemoParagraphs()}
</div>
{this.renderControls()}
</section>
);
}
Dies ist der Einstiegspunkt für TopAppBar in der Anwendung.
Öffnen Sie die Datei TopAppBar.js. Sie enthält eine einfache React-Klasse Component mit einer Methode render:
TopAppBar.js
import React from 'react';
export default class TopAppBar extends React.Component {
render() {
return (
<header>
TOP APP BAR
</header>
);
}
}
3. Zusammensetzung der Komponente
In React gibt die Methode render das HTML der Komponente aus. Die Komponente der oberen App-Leiste rendert ein <header />-Tag und besteht aus zwei Hauptbereichen:
- Bereich mit Navigationssymbol und Titel
- Bereich mit Aktionssymbolen
Wenn Sie Fragen zu den Elementen haben, aus denen die obere App-Leiste besteht, lesen Sie die Dokumentation auf GitHub.
Ändern Sie die Methode render() in TopAppBar.js so, dass sie so aussieht:
render() {
const {
title,
navIcon,
} = this.props;
return (
<header
className={this.classes}
style={this.getMergedStyles()}
ref={this.topAppBarElement}
>
<div className='mdc-top-app-bar__row'>
<section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-start'>
{navIcon ? navIcon : null}
<span className="mdc-top-app-bar__title">
{title}
</span>
</section>
{this.renderActionItems()}
</div>
</header>
);
}
Dieses HTML enthält zwei Abschnittselemente. Der erste enthält ein Navigationssymbol und einen Titel. Der zweite enthält Aktionssymbole.
Fügen Sie als Nächstes die Methode renderActionItems hinzu:
renderActionItems() {
const {actionItems} = this.props;
if (!actionItems) {
return;
}
return (
<section className='mdc-top-app-bar__section mdc-top-app-bar__section--align-end' role='toolbar'>
{/* need to clone element to set key */}
{actionItems.map((item, key) => React.cloneElement(item, {key}))}
</section>
);
}
Ein Entwickler importiert TopAppBar in seine React-Anwendung und übergibt Aktionssymbole an das Element TopAppBar. Beispielcode zum Initialisieren von TopAppBar finden Sie in App.js.
Die Methode getMergedStyles fehlt, die in der Methode render verwendet wird. Fügen Sie der Klasse TopAppBar die folgende JavaScript-Methode hinzu:
getMergedStyles = () => {
const {style} = this.props;
const {style: internalStyle} = this.state;
return Object.assign({}, internalStyle, style);
}
this.classes fehlt auch in der Methode render, wird aber in einem späteren Abschnitt behandelt. Neben der fehlenden Getter-Methode this.classes müssen Sie noch weitere Teile von TopAppBar implementieren, bevor die obere App-Leiste korrekt gerendert werden kann.
Die folgenden Teile der React-Komponente fehlen noch in der oberen App-Leiste:
- Eine initialisierte Foundation
- Adaptermethoden, die an die Foundation übergeben werden sollen
- JSX-Markup
- Variantenverwaltung (fixed, short, always collapsed, prominent)
Strategie
- Implementieren Sie die Adapter -Methoden.
- Initialisieren Sie die Foundation in
componentDidMount. - Rufen Sie die Methode Foundation.destroy in
componentWillUnmountauf. - Richten Sie die Variantenverwaltung über eine Getter-Methode ein, die die entsprechenden Klassennamen kombiniert.
4. Adaptermethoden implementieren
Die Framework-unabhängige JS TopAppBar Component implementiert die folgenden Adapter -Methoden (detailliert hier aufgeführt):
hasClass()addClass()removeClass()registerNavigationIconInteractionHandler()deregisterNavigationIconInteractionHandler()notifyNavigationIconClicked()setStyle()getTopAppBarHeight()registerScrollHandler()deregisterScrollHandler()registerResizeHandler()deregisterResizeHandler()getViewportScrollY()getTotalActionItems()
Da React synthetische Ereignisse und andere Best Practices und Muster für die Programmierung verwendet, müssen die Adapter -Methoden neu implementiert werden.
Adapter-Getter-Methode
Fügen Sie in der TopAppBar.js Datei die folgende JavaScript-Methode zu TopAppBar hinzu:
get adapter() {
const {actionItems} = this.props;
return {
hasClass: (className) => this.classes.split(' ').includes(className),
addClass: (className) => this.setState({classList: this.state.classList.add(className)}),
removeClass: (className) => {
const {classList} = this.state;
classList.delete(className);
this.setState({classList});
},
setStyle: this.setStyle,
getTopAppBarHeight: () => this.topAppBarElement.current.clientHeight,
registerScrollHandler: (handler) => window.addEventListener('scroll', handler),
deregisterScrollHandler: (handler) => window.removeEventListener('scroll', handler),
registerResizeHandler: (handler) => window.addEventListener('resize', handler),
deregisterResizeHandler: (handler) => window.removeEventListener('resize', handler),
getViewportScrollY: () => window.pageYOffset,
getTotalActionItems: () => actionItems && actionItems.length,
};
}
Die Adapter-APIs für die Registrierung von Scroll- und Größenänderungsereignissen werden identisch mit der Framework-unabhängigen JS-Version implementiert, da React keine synthetischen Ereignisse für das Scrollen oder Ändern der Größe hat und auf das native DOM-Ereignissystem zurückgreift. getViewPortScrollY muss auch auf das native DOM zurückgreifen, da es sich um eine Funktion für das window-Objekt handelt, die nicht in der React-API enthalten ist. Die Adapterimplementierungen sind für jedes Framework unterschiedlich.
Möglicherweise fehlt this.setStyle, das von der Methode get adapter aufgerufen wird. Fügen Sie in der Datei TopAppBar.js die fehlende JavaScript-Methode zur Klasse TopAppBar hinzu:
setStyle = (varName, value) => {
const updatedStyle = Object.assign({}, this.state.style);
updatedStyle[varName] = value;
this.setState({style: updatedStyle});
}
Sie haben gerade den Adapter implementiert. Möglicherweise werden in der Konsole Fehler angezeigt, da die vollständige Implementierung noch nicht abgeschlossen ist. Im nächsten Abschnitt erfahren Sie, wie Sie CSS-Klassen hinzufügen und entfernen.
5. Komponentenmethoden implementieren
Varianten und Klassen verwalten
React hat keine API zum Verwalten von Klassen. Um die Methoden zum Hinzufügen und Entfernen von CSS-Klassen von nativem JavaScript nachzuahmen, fügen Sie die Statusvariable classList hinzu. Es gibt drei Codeabschnitte in TopAppBar , die mit CSS-Klassen interagieren:
- Komponente
<TopAppBar />über die EigenschaftclassName. - Die Adapter -Methode über
addClassoderremoveClass. - Fest codiert in der
<TopAppBar />React-Komponente.
Fügen Sie zuerst den folgenden Import oben in TopAppBar.js unter den vorhandenen Importen hinzu:
import classnames from 'classnames';
Fügen Sie dann den folgenden Code in die Klassendeklaration der Komponente TopAppBar ein:
export default class TopAppBar extends React.Component {
constructor(props) {
super(props);
this.topAppBarElement = React.createRef();
}
state = {
classList: new Set(),
style: {},
};
get classes() {
const {classList} = this.state;
const {
alwaysCollapsed,
className,
short,
fixed,
prominent,
} = this.props;
return classnames('mdc-top-app-bar', Array.from(classList), className, {
'mdc-top-app-bar--fixed': fixed,
'mdc-top-app-bar--short': short,
'mdc-top-app-bar--short-collapsed': alwaysCollapsed,
'mdc-top-app-bar--prominent': prominent,
});
}
...
}
Wenn Sie http://localhost:8080 aufrufen, sollten die Kontrollkästchen jetzt die Klassennamen im DOM ein- und ausschalten.
Dieser Code macht TopAppBar für viele Entwickler nutzbar. Entwickler können mit der TopAppBar-API interagieren, ohne sich um die Implementierungsdetails von CSS-Klassen kümmern zu müssen.
Sie haben den Adapter jetzt implementiert. Im nächsten Abschnitt erfahren Sie, wie Sie eine Foundation instanziieren.
Komponente einbinden und entfernen
Die Instanziierung von Foundation erfolgt in der Methode componentDidMount.
Importieren Sie zuerst die MDC-Foundations für die obere App-Leiste, indem Sie den folgenden Import nach den vorhandenen Importen in TopAppBar.js hinzufügen:
import {MDCTopAppBarFoundation, MDCFixedTopAppBarFoundation, MDCShortTopAppBarFoundation} from '@material/top-app-bar';
Fügen Sie dann den folgenden JavaScript-Code in die Klasse TopAppBar ein:
export default class TopAppBar extends React.Component {
...
foundation_ = null;
componentDidMount() {
this.initializeFoundation();
}
componentWillUnmount() {
this.foundation_.destroy();
}
initializeFoundation = () => {
if (this.props.short) {
this.foundation_ = new MDCShortTopAppBarFoundation(this.adapter);
} else if (this.props.fixed) {
this.foundation_ = new MDCFixedTopAppBarFoundation(this.adapter);
} else {
this.foundation_ = new MDCTopAppBarFoundation(this.adapter);
}
this.foundation_.init();
}
...
}
Eine gute React-Programmierpraxis ist es, propTypes und defaultProps zu definieren. Fügen Sie den folgenden Import nach den vorhandenen Importen in TopAppBar.js hinzu:
import PropTypes from 'prop-types';
Fügen Sie dann den folgenden Code am Ende von TopAppBar.js (nach der Komponentenklasse) hinzu:
import PropTypes from 'prop-types';
TopAppBar.propTypes = {
alwaysCollapsed: PropTypes.bool,
short: PropTypes.bool,
fixed: PropTypes.bool,
prominent: PropTypes.bool,
title: PropTypes.string,
actionItems: PropTypes.arrayOf(PropTypes.element),
navIcon: PropTypes.element,
};
TopAppBar.defaultProps = {
alwaysCollapsed: false,
short: false,
fixed: false,
prominent: false,
title: '',
actionItems: null,
navIcon: null,
};
Sie haben die React-Komponente für die obere App-Leiste jetzt implementiert. Wenn Sie http://localhost:8080 aufrufen, können Sie mit der Demoseite interagieren. Die Demoseite funktioniert genauso wie die Demoseite von MDC Web. Die Demoseite sollte so aussehen:
6. Zusammenfassung
In dieser Anleitung haben wir behandelt, wie Sie die Foundation von MDC Web für die Verwendung in einer React-Anwendung umschließen. Auf GitHub und npm gibt es einige Bibliotheken, die MDC Web-Komponenten umschließen, wie unter In Frameworks einbinden beschrieben. Wir empfehlen Ihnen, die Liste hier zu verwenden. Diese Liste enthält neben React auch andere Frameworks wie Angular und Vue.
In dieser Anleitung wird unsere Entscheidung hervorgehoben, den MDC Web-Code in drei Teile aufzuteilen: Foundation, Adapter und Component. Diese Architektur ermöglicht es Komponenten, gemeinsamen Code zu verwenden und gleichzeitig mit allen Frameworks zu arbeiten. Vielen Dank, dass Sie Material Components React ausprobiert haben. Sehen Sie sich auch unsere neue Bibliothek MDC React an. Wir hoffen, dieses Codelab hat Ihnen gefallen.