Material Design von Google im neuer Fassung veröffentlicht

Material Design 2.0 für React Native Paper: Was ist neu?
Keine Kommentare

Paper ist eine Library, die Material Design für React Native implementiert. Jetzt ist eine neue Version von Paper erschienen, die mit Material Design 2.0 arbeitet. Was hat sich geändert – an Material Design und Paper?

Die Library Paper für React Native ist in Version 2.0 erschienen. Props für Accessibility-Features werden nun automatisch hinzugefügt, außerdem bringen viele Komponenten in der neuen Version Support für RTL mit. Neu sind außerdem die folgenden Komponenten: IconButton, Checkbox.Android, Checkbox.IOS, RadioButton.Android, RadioButton.IOS. Außerdem wurden zahlreiche kleinere Neuerungen vorgenommen, wie den Release Notes auf GitHub zu entnehmen ist.

React Native Paper: Material Design 2.0?

Neben neuen Komponenten und Bugfixes wurde jedoch auch eine größere Neuerung an Paper vorgenommen: Die Material-Design-Library wurde den aktualisierten Designstandards von Google angepasst. Im Rahmen der I/O 2018 hatte Google im Frühjahr einige Neuerungen am Material Design vorgestellt. Zwar bezeichnet Google diese selbst nicht als Version 2.0; schon ein Blick auf die Website zum Material Design zeigt aber, dass sich hier einiges verändert hat.

Kostenlos: Das iJS React Cheat Sheet

Sie wollen mit React durchstarten?
Unser Cheatsheet zeigt Ihnen alle wichtigen Snippets auf einen Blick.
Jetzt kostenlos herunterladen!

Download for free

 

Angular Kickstart: von 0 auf 100

mit Christian Liebel (Thinktecture AG) und Peter Müller (Freelancer)

JavaScript für Softwareentwickler – für Einsteiger und Umsteiger

mit Yara Mayer (evia) und Sebastian Springer (MaibornWolff)

Der alte Material-Design-Standard bestand aus Guidelines, die für eigene Projekte herangezogen werden konnten. Diese Richtlinien sind erhalten geblieben; mit der diesjährigen Überarbeitung sind der Designsprache jedoch weitere Bestandteile hinzugefügt worden. Neu ist auch, dass Google nun bereits auf der Startseite der Material-Design-Website betont, dass es sich bei der Designsprache nur um eine Grundlage für individualisierte und einzigartige Themes handelt, nicht um starre Regeln. Zuvor war das Material Design seit seiner ersten Veröffentlichung wiederholt dafür kritisiert worden, zu unflexibel zu sein und nur für Layouts im Google-Stil geeignet zu sein. Davon scheint Google sich nun distanzieren zu wollen.

Material Design: 3 Teile für mehr Flexibilität

Neu ist aber auch der Bereiche der Material Foundation, der losgelöst von den Guidelines zusammenfasst, welche Architekturideen hinter dem Material Design stehen. Das Material System als dritter Bestandteil des neuen Material Designs bezeichnet das Designsystem, das die Komponenten und künftig auch Tools zur Gestaltung von Websites und der Verbesserung der Zusammenarbeit zwischen Design- und Entwicklerteams umfassen soll.

Was hat sich aber konkret verändert? Google setzt beispielsweise einen anderen Fokus hinsichtlich der Bedeutung der Navigation am oberen und unteren Ende einer mobilen Anwendung. So ist in den Beispielen für Navigationen nun auch unten ein Hamburger-Menu zu sehen. Auch wird in den neuen Guidelines empfohlen, das obere Menu für Aktionen zu wählen, die die aktuell angezeigte Seite betreffen. Zuvor sollte dafür eher das untere Menü genutzt werden.

Mehr Updates, viele Neuerungen

Darüber hinaus hat sich bei Googles Material Design aber vor allem die Update-Strategie verändert. Google veröffentlicht nun auf GitHub monatliche Updates für Material Design, die über die Roadmap nachvollzogen werden können. Das August-Update brachte Neuerungen für den Navigation Drawer und die Menu-Komponente mit.

In React Native Paper zeigt ein Blick auf die Breaking Changes zum Release von Version 2.0, was genau sich technisch an der Library geändert hat. Insgesamt 19 Komponenten haben einen neuen Namen bekommen oder wurden unter neuen Namespaces zusammengefasst. FABGroup ist jetzt beispielsweise als FAB.Group benannt. Diese Namespace-Änderung wurde für viele der umbenannten Komponenten in gleicher Form vorgenommen. Außerdem gab es Änderungen an Button, die das API betreffen und viele weitere Neuerungen, die dem Migration Guide entnommen werden können.

Unsere Redaktion empfiehlt:

Relevante Beiträge

X
- Gib Deinen Standort ein -
- or -