Реагирайте MDL обединява реагира с материал дизайн Lite

Наскоро Google пусна библиотека наречена Material Design Lite, която е ресурс за разработчиците. Той автоматично стилизира всеки уебсайт, като използва указанията за проектиране на материали с предварително изградени CSS и JS.

Това е популярна рамка за прости проекти. Реагирайте MDL съчетава рамката на Google с библиотеката React, за да направите добре закръгления ресурс на интерфейса.

Материалният дизайн на Google очевидно е бъдещето на UI / UX в света на Google. А с Material Design Lite е по-лесно от всякога да внедрявате тези функции във всеки уебсайт с собствена библиотека с отворен код.

React е и най-популярната фронтенд JS рамка, използвана за компонентите на предния фронд. С React MDL можете да обедините тези компоненти React с библиотеката на MDL, за да получите изглед, подобен на този в онлайн документацията на Google.

Ето един примерен шаблон на статия, за да можете да усетите как изглежда това.

Тази страница няма много компоненти на React, но демонстрира естетиката на дизайна на материала. Ще намерите много повече действия в тази демонстрация, изградена с помощта на компоненти на React.

Всъщност можете да намерите повече информация за Material Design Lite в GitHub repo, ако сте любопитни да научите повече. От там можете да изтеглите суровите CSS и JS, за да ги внедрите в страницата си, която автоматично поддържа всички модерни браузъри и грациозната деградация.

За съжаление, тъй като React MDL все още е сравнително нова, тя няма пълна поддръжка за всички компоненти.

Но можете да видите пълен списък тук, включително малки демонстрации за всеки един. Това включва и битове на изходния код, които можете да копирате / поставите в собствените си проекти, ако е необходимо.

бих не препоръчваме да научите Реагирайте MDL, докато вече се чувствате комфортно с двете библиотеки.

Материалът Design Lite е доста лесен за започване, но React е много по-сложен.

За да научите повече за MDL, разгледайте страницата с често задавани въпроси на официалния им сайт. Той предлага съвети за това къде да се използва MDL, какви функции предлага и как може да се впише в типичен работен поток на webdev.

Но искрено, дори и да не разбирате Реагирайте много добре, можете да продължите с всички проби на страницата с компоненти. Например страницата на текстовото поле има работни текстови полета, използващи дизайн на материала, но с фрагменти от кода на Реакт.

Чувствайте се свободни да играете и да видите какво можете да построите. И двете библиотеки са напълно безплатни и с отворен код за всички проекти, лични или търговски.

Можете да научите повече от страницата React MDL GitHub, ако искате да изучите източника и да се потопите в него.