Reaguj MDL Merges React z Material Design Lite

Google niedawno wydał bibliotekę o nazwie Material Design Lite, która jest zasobem frontendowym dla programistów. Automatycznie nadaje styl każdej stronie internetowej, korzystając z wytycznych dotyczących projektowania materiałów, z gotowymi CSS i JS.

Jest to popularny framework do prostych projektów dev. React MDL łączy strukturę Google'a z biblioteką React, aby stworzyć wszechstronny zasób frontendowy.

Materiałowy projekt Google jest wyraźnie przyszłością interfejsu użytkownika / UX w świecie Google. Dzięki Material Design Lite łatwiej niż kiedykolwiek zaimplementować te funkcje na dowolnej stronie internetowej z zastrzeżoną biblioteką open source.

React jest również zdecydowanie najpopularniejszym frameworkiem JS używanym do komponentów widoku frontendu. Dzięki React MDL można połączyć te komponenty React z biblioteką MDL, aby uzyskać widok podobny do tego, który można znaleźć w dokumentacji online Google.

Oto przykładowy szablon artykułu, dzięki któremu możesz poczuć, jak to wygląda.

Ta strona nie ma wielu komponentów React, ale pokazuje estetykę projektowania materiałów. W tej wersji demonstracyjnej, opartej na komponentach React, znajdziesz znacznie więcej akcji.

Możesz dowiedzieć się więcej o Material Design Lite na repozytorium GitHub, jeśli chcesz dowiedzieć się więcej. Stamtąd możesz pobrać surowy CSS i JS, aby zaimplementować na swojej stronie, która automatycznie obsługuje wszystkie nowoczesne przeglądarki i pełną wdzięku degradację.

Niestety, ponieważ React MDL jest wciąż dość nowy, nie ma pełnego wsparcia dla wszystkich komponentów.

Ale możesz zobaczyć pełną listę zawierającą małe wersje demonstracyjne dla każdego z nich. Obejmuje to również fragmenty kodu źródłowego, które można kopiować / wklejać do własnych projektów w razie potrzeby.

Ja bym nie zalecaj uczenie się React MDL, dopóki nie poczujesz się komfortowo w obu bibliotekach.

Zestaw Material Design Lite jest dość prosty do uruchomienia, ale React jest znacznie bardziej złożony.

Aby dowiedzieć się więcej o MDL, odwiedź stronę FAQ na oficjalnej stronie. Oferuje wskazówki, gdzie korzystać z MDL, jakie funkcje oferuje i jak może się zmieścić w typowym obiegu pracy Webdev.

Ale zgodnie z prawdą, nawet jeśli nie rozumiesz React bardzo dobrze, możesz nadal korzystać ze wszystkich próbek na stronie komponentów. Na przykład strona tekstowa ma działające pola tekstowe z wykorzystaniem projektowania materiałów, ale z fragmentami kodu React.

Zapraszam do zabawy i zobaczenia, co możesz zbudować. Obie biblioteki są całkowicie bezpłatne i otwarte dla wszystkich projektów, zarówno osobistych, jak i komercyjnych.

Więcej informacji można znaleźć na stronie React MDL GitHub, jeśli chcesz poznać źródło i zanurkować.