React MDL führt React mit Material Design Lite zusammen

Vor kurzem hat Google eine Bibliothek namens Material Design Lite herausgebracht, die eine Frontend-Ressource für Entwickler darstellt. Es formatiert automatisch jede Website anhand der Richtlinien für das Materialdesign mit vorgefertigten CSS und JS.

Dies ist ein beliebter Rahmen für einfache Entwicklungsprojekte. React MDL kombiniert das Google-Framework mit der React-Bibliothek, um eine abgerundete Frontend-Ressource zu erstellen.

Das Materialdesign von Google ist eindeutig die Zukunft von UI / UX in der Welt von Google. Mit Material Design Lite ist es einfacher als je zuvor, diese Funktionen auf einer Website mit einer proprietären Open Source-Bibliothek zu implementieren.

React ist auch das mit Abstand beliebteste JS-Framework für Frontend-View-Komponenten. Mit React MDL können Sie diese React-Komponenten mit der MDL-Bibliothek zusammenführen, um eine Ansicht zu erhalten, die Sie in der Online-Dokumentation von Google finden.

Hier ist eine Beispielartikelvorlage, mit der Sie sich ein Bild davon machen können.

Diese Seite enthält nicht viele React-Komponenten, zeigt jedoch die Ästhetik des Materialdesigns. In dieser mit React-Komponenten erstellten Demo werden Sie viel mehr Action finden.

Weitere Informationen zu Material Design Lite finden Sie im GitHub-Repo, wenn Sie mehr darüber erfahren möchten. Von dort aus können Sie das unformatierte CSS und JS herunterladen, um es in Ihre Seite zu implementieren, die automatisch alle modernen Browser und die elegante Degradierung unterstützt.

Da React MDL noch relativ neu ist, werden leider nicht alle Komponenten vollständig unterstützt.

Sie können hier jedoch eine vollständige Liste mit kleinen Demos sehen. Dazu gehört auch Quellcode, den Sie nach Bedarf in Ihre eigenen Projekte kopieren / einfügen können.

Ich würde nicht Es empfiehlt sich, MDL zu lernen, bis Sie sich in beiden Bibliotheken bereits wohl gefühlt haben.

Die Material Design Lite-Suite ist ziemlich einfach zu starten, aber React ist viel komplexer.

Um mehr über MDL zu erfahren, besuchen Sie die FAQ-Seite auf ihrer offiziellen Website. Es gibt Tipps, wo MDL verwendet werden kann, welche Features es bietet und wie es in einen typischen WebDev-Workflow passen kann.

Aber auch wenn Sie React nicht gut verstehen, können Sie mit allen Mustern auf der Komponentenseite auskommen. Zum Beispiel hat die Textfeldseite funktionierende Textfelder, die Materialdesign verwenden, jedoch mit Code-Snippets von React.

Fühlen Sie sich frei, um herumzuspielen und zu sehen, was Sie bauen können. Beide Bibliotheken sind vollständig kostenlos und Open Source für alle persönlichen oder kommerziellen Projekte.

Weitere Informationen finden Sie auf der React MDL GitHub-Seite, wenn Sie die Quelle studieren und eintauchen möchten.