Material Plus

Über dieses Projekt

Material Plus ist eine React-Komponentenbibliothek, die Material Design 3 direkt umsetzt, statt eine bestehende Umsetzung davon zu umhüllen — seine Farbrollen, seine Typoskala und seine Formen sind also die, die die Spezifikation benennt. Was dazukommt, ist der Stapel Komponenten, den ein Material-Projekt am Ende ohnehin selbst schreibt: das Eingabefeld, das ostasiatische Eingabemethoden richtig behandelt, die Icon-Hülle, die zu Ihrem eigenen Satz passt — herausgelöst, dokumentiert und getestet. Die Bibliothek geht außerdem über die Spezifikation hinaus, wo Anwendungen das verlangen: mit erweiterten Fassungen der Komponenten, die Material benennt, und mit den Diagrammen, der Datentabelle und der Befehlspalette, die dort gar nicht vorkommen.

Das Thema steht in einer Zeile: Eine Quellfarbe setzen, und jede Farbrolle folgt, so wie Material aus einer Quellfarbe ein Schema erzeugt. Nichts in der Bibliothek greift auf Seitenebene ein — kein Reset, kein Provider, kein globales Styling — und sie liest die Material-Systemtoken, die eine Seite bereits trägt. Ein Projekt, das schon Material einsetzt, behält seine Einrichtung und bekommt die fehlenden Komponenten dazu. Koreanische, japanische und chinesische Eingabe übersteht, was der Change-Handler auch immer mit dem Wert anstellt — jener Fehler, den die meisten Material-Felder stillschweigend mit sich tragen.

Das Paket ist reines ESM mit TypeScript-Deklarationen und lässt sich wirklich tree-shaken: eine Komponente sind gzip-komprimiert 3,8 kB gegenüber 130,6 kB für alle zusammen, mehr als hundertzwanzig an der Zahl, und das Stylesheet teilt sich genauso auf. Es funktioniert ohne Konfiguration in einer Next.js-Serverkomponente, wird von jedem größeren Bundler aufgelöst, und Übersetzungen kommen als Modul, das einmal beim Start übergeben wird.

Funktionen

• Dokumentationsseite

• TypeScript-Typen

• Mehrsprachig

• Durch Tests geprüft

• Barrierefrei gebaut

• Dunkelmodus

• Tree-shakebar