Reacționează MDL Merges React cu Material Design Lite

Google a lansat recent o bibliotecă numită Material Design Lite, care este o resursă frontală pentru dezvoltatori. Ea automat stiluri orice site folosind ghidul de proiectare materiale cu pre-construit CSS și JS.

Acesta este un cadru popular pentru proiectele simple dev. Reacționați că MDL combină cadrul Google cu biblioteca React pentru a crea o resursă frontală bine rotunjită.

Designul material al Google este în mod clar viitorul UI / UX din lumea Google. Și cu Material Design Lite este mai ușor decât oricând să implementeze aceste funcții pe orice site web cu o bibliotecă de tip open source proprietate.

React este, de asemenea, de departe cel mai popular cadru frontal JS folosit pentru componentele de vizualizare frontend. Cu React MDL puteți îmbina componentele React cu biblioteca MDL pentru a obține o vizualizare asemănătoare pe care o veți găsi în documentația online Google.

Iată un exemplu de șablon de articol, astfel încât să puteți simți cum arată acest lucru.

Această pagină nu are multe componente React, dar demonstrează estetica designului material. Veți găsi mai multe acțiuni pe acest demo construit folosind componentele React.

Puteți găsi mai multe informații despre Material Design Lite pe GitHub repo dacă sunteți curios să aflați mai multe. De acolo puteți descărca CSS și JS raw pentru a le implementa în pagina dvs. care suportă automat toate browserele moderne și degradarea grațioasă.

Din păcate, deoarece React MDL este încă destul de nou, nu are suport complet pentru toate componentele.

Dar puteți vedea o listă completă aici, inclusiv demo-uri mici pentru fiecare. Acest lucru include, de asemenea, biți de cod sursă pe care le puteți copia / lipi în propriile proiecte, după cum este necesar.

Aș nu recomanda învățarea React MDL până când te simți confortabil cu ambele biblioteci.

Suita Material Design Lite este destul de simplă pentru a începe, dar React este mult mai complexă.

Pentru a afla mai multe despre MDL, consultați pagina de Întrebări frecvente pe site-ul oficial. Acesta oferă sfaturi cu privire la locul de utilizare a MDL, caracteristicile pe care le oferă și cum se poate potrivi într-un flux de lucru tipic webdev.

Dar, în mod sincer, chiar dacă nu înțelegeți că reacționați foarte bine, puteți totuși să obțineți toate probele de pe pagina componentelor. De exemplu, pagina cu câmp textil are câmpuri de lucru care utilizează un design material, dar cu fragmente de cod React.

Simțiți-vă liber să jucați și să vedeți ce puteți construi. Ambele biblioteci sunt complet libere și open source pentru toate proiectele, fie personal, fie comercial.

Puteți afla mai multe în pagina React MDL GitHub dacă doriți să studiați sursa și să vă aruncați cu capul în jos.