Реакція MDL об'єднує реагує з матеріалом Design Lite

Google нещодавно випустив бібліотеку під назвою Material Design Lite, яка є ресурсом для розробників. Він автоматично стилює будь-який веб-сайт, використовуючи керівні принципи розробки матеріалів з попередньо побудованими CSS і JS.

Це популярна основа для простих проектів розробки. React MDL поєднує фреймворк Google з бібліотекою React, щоб створити всебічний ресурс інтерфейсу.

Матеріальний дизайн Google явно є майбутнім UI / UX у світі Google. А за допомогою Material Design Lite легше, ніж будь-коли, реалізувати ці функції на будь-якому веб-сайті з власною бібліотекою з відкритим кодом.

Реакція також є найпопулярнішим фронтендним JS-фреймворком, використовуваним для компонентів перегляду інтерфейсів. За допомогою React MDL можна об'єднати ці компоненти React з бібліотекою MDL, щоб отримати перегляд, подібний до того, як ви знайдете в онлайн-документації Google.

Ось приклад шаблону статті, щоб ви могли відчути, як це виглядає.

Ця сторінка не містить багато компонентів React, але демонструє естетичний дизайн матеріалу. Ви знайдете набагато більше дій на цій демонстрації з використанням компонентів React.

Ви можете знайти більше інформації про Material Design Lite на GitHub repo, якщо вам цікаво дізнатися більше. Звідти ви можете завантажити необроблений CSS і JS для реалізації на вашій сторінці, який автоматично підтримує всі сучасні браузери і витончене зниження.

На жаль, оскільки React MDL все ще досить новий, він не має повної підтримки для всіх компонентів.

Але тут ви можете побачити повний список, включаючи невеликі демонстрації для кожного з них. Це також включає в себе біти вихідного коду, які можна копіювати / вставляти у власні проекти за потреби.

я б ні рекомендуємо вивчати React MDL доти, доки ви вже не відчуєте себе комфортно в обох бібліотеках.

Набір Material Design Lite досить простий, але React набагато складніший.

Щоб дізнатися більше про MDL, ознайомтеся зі сторінкою запитань на їх офіційному сайті. Він пропонує поради про те, де використовувати MDL, які функції він пропонує, і як він може вписатися в типовий робочий процес webdev.

Але правдиво, навіть якщо ви не розумієте, що реагувати дуже добре, ви все ще можете отримати з усіма зразками на сторінці компонентів. Наприклад, на сторінці текстового поля є робочі текстові поля з використанням конструкції матеріалу, але з фрагментами коду React.

Не соромтеся грати навколо і подивитися, що ви можете побудувати. Обидві бібліотеки є повністю вільними та відкритими джерелами для всіх проектів, як особистих, так і комерційних.

Ви можете дізнатися більше на сторінці React MDL GitHub, якщо ви хочете вивчити джерело та зануритися.