React MDL Объединяет React с Material Design Lite

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

Это популярный фреймворк для простых проектов разработчиков. React MDL объединяет каркас Google с библиотекой React для создания всестороннего внешнего интерфейса..

Материальный дизайн Google - это будущее UI / UX в мире Google. А с Material Design Lite проще, чем когда-либо, реализовать эти функции на любом веб-сайте с проприетарной библиотекой с открытым исходным кодом..

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

Вот пример шаблона статьи, чтобы вы могли почувствовать, как это выглядит.

На этой странице не много компонентов React, но она демонстрирует эстетику дизайна материала. Вы найдете гораздо больше действий в этой демонстрации, построенной с использованием компонентов React..

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

К сожалению, поскольку React MDL все еще довольно новый, он не имеет полной поддержки всех компонентов.

Но вы можете увидеть полный список здесь, включая небольшие демонстрационные ролики для каждого. Это также включает в себя биты исходного кода, которые вы можете копировать / вставлять в свои собственные проекты по мере необходимости.

я мог бы не рекомендуем изучать React MDL, пока вы не почувствуете себя комфортно с обеими библиотеками.

Пакет Material Design Lite довольно прост в запуске, но React намного сложнее.

Чтобы узнать больше о MDL, посетите страницу часто задаваемых вопросов на их официальном сайте. Он предлагает советы о том, где использовать MDL, какие функции он предлагает и как он может вписаться в типичный рабочий процесс webdev..

Но, честно говоря, даже если вы не очень хорошо понимаете React, вы все равно можете обойтись со всеми примерами на странице компонентов. Например, на странице текстового поля есть рабочие текстовые поля, использующие дизайн материала, но с фрагментами кода React..

Не стесняйтесь поиграть и посмотреть, что вы можете построить. Обе библиотеки абсолютно бесплатны и открыты для всех проектов, как личных, так и коммерческих..

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