Reagera MDL-fusioner reagera med Material Design Lite

Google har nyligen lagt ut ett bibliotek som heter Material Design Lite som är en frontend-resurs för utvecklare. Den utformar automatiskt alla webbplatser med hjälp av riktlinjerna för materialdesign med förkonstruerade CSS och JS.

Detta är en populär ram för enkla dev-projekt. React MDL kombinerar Googles ramar med React-biblioteket för att skapa en väl avrundad frontendresurs.

Googles materialdesign är tydligt framtiden för UI / UX i Google. Och med Material Design Lite är det enklare än någonsin att implementera dessa funktioner på en webbplats med ett eget open source-bibliotek.

React är också överlägset den mest populära frontend-JS-ramen som används för frontend-visningskomponenter. Med React MDL kan du slå samman dessa React-komponenter med MDL-biblioteket för att få en vy som du hittar i Googles online dokumentation.

Här är en mall för provartikel så att du kan få en känsla av hur det här ser ut.

Den här sidan har inte många React-komponenter men det visar estetiken i materialdesignen. Du hittar mycket mer action på den här demo som byggdes med React-komponenter.

Du kan faktiskt hitta mer information om Material Design Lite på GitHub repo om du är nyfiken på att lära dig mer. Därifrån kan du ladda ner den råa CSS och JS för att implementera i din sida som automatiskt stöder alla moderna webbläsare och graciös nedbrytning.

Tyvärr, eftersom React MDL fortfarande är ganska ny, har det inte fullt stöd för alla komponenter.

Men du kan se en fullständig lista här, inklusive små demo för var och en. Detta inkluderar också bitar av källkod som du kan kopiera / klistra in i dina egna projekt efter behov.

jag skulle inte rekommenderar att du läser React MDL tills du redan känner dig bekväm med båda biblioteken.

Material Design Lite-paketet är ganska enkelt att börja, men React är mycket mer komplext.

Om du vill veta mer om MDL kolla du FAQ-sidan på deras officiella hemsida. Den erbjuder tips om var du ska använda MDL, vilka funktioner den erbjuder och hur den kan passa in i ett typiskt webdev-arbetsflöde.

Men sanningsenligt, även om du inte förstår React mycket bra, kan du fortfarande gå med med alla proverna på komponentsidan. Exempelvis har textfältsidan fungerande textfält som använder materialdesign men med React-kodutdrag.

Känn dig fri att leka och se vad du kan bygga. Båda biblioteken är helt gratis och öppen källkod för alla projekt, personliga eller kommersiella.

Du kan läsa mer på React MDL GitHub-sidan om du vill studera källan och dyka in.