Reagér MDL-sammensmeltninger React med Material Design Lite

Google har for nylig udgivet et bibliotek kaldet Material Design Lite, som er en frontend ressource for udviklere. Det stilarter automatisk ethvert websted ved hjælp af retningslinjerne for materiale design med forudbygget CSS og JS.

Dette er en populær ramme for simple dev projekter. React MDL kombinerer Googles rammer med React-biblioteket for at lave en velafrundet frontend-ressource.

Googles materiale design er tydeligt fremtiden for UI / UX i Google's verden. Og med Material Design Lite er det nemmere end nogensinde at implementere disse funktioner på enhver hjemmeside med et proprietært open source-bibliotek.

React er også langt den mest populære frontend JS-ramme, der anvendes til frontend-visningskomponenter. Med React MDL kan du fusionere disse React-komponenter med MDL-biblioteket for at få en visning, som du kan finde i Googles online dokumentation.

Her er en prøve artikels skabelon, så du kan få en fornemmelse af, hvordan det ser ud.

Denne side har ikke mange React-komponenter, men det viser æstetikken i materialedesign. Du finder meget mere action på denne demo bygget ved hjælp af React-komponenter.

Du kan faktisk finde mere information om Material Design Lite på GitHub repo, hvis du er nysgerrig efter at lære mere. Derfra kan du downloade den rå CSS og JS til at implementere i din side, som automatisk understøtter alle moderne browsere og yndefulde nedbrydning.

Desværre, da React MDL stadig er ret nyt, har den ikke fuld støtte til alle komponenter.

Men du kan se en komplet liste her, herunder små demoer for hver enkelt. Dette omfatter også bits af kildekoden, som du kan kopiere / indsætte i dine egne projekter efter behov.

jeg ville ikke anbefaler at lære React MDL, indtil du allerede har det godt med begge biblioteker.

Material Design Lite-pakken er ret simpel at starte, men React er meget mere kompleks.

Hvis du vil vide mere om MDL, kan du læse FAQ-siden på deres officielle side. Det giver tips om, hvor du kan bruge MDL, hvilke funktioner det tilbyder, og hvordan det kan passe ind i en typisk webdev-arbejdsgang.

Men selvfølgelig, selvom du ikke forstår React meget godt, kan du stadig komme forbi med alle prøverne på komponentsiden. F.eks. Har tekstfeltet side arbejdsområder, der bruger materialedesign, men med React-kodestykker.

Du er velkommen til at spille rundt og se, hvad du kan bygge. Begge biblioteker er helt gratis og open source til alle projekter, uanset om de er personlige eller kommercielle.

Du kan finde ud af mere fra React MDL GitHub-siden, hvis du vil studere kilden og dykke ind.