Google最近推出了一个名为Material Design Lite的库,该库是开发人员的前端资源。 它会根据材料设计指南以及预先构建CSS和JS,自动为任何网站设置样式。
这是用于简单开发项目的流行框架。 React MDL将Google的框架与React库结合在一起,构成了全面的前端资源。
![ReactMDL主页](https://i-blog.csdnimg.cn/blog_migrate/a0da783eb06fdd3b9bcfedba6b8de1f7.png)
Google的材料设计显然是UI / UX在Google世界中的未来。 使用Material Design Lite,比以往任何时候都更容易使用专有的开源库在所有网站上实现这些功能。
到目前为止,React还是用于前端视图组件的最流行的前端JS框架。 使用React MDL,您可以将这些React组件与MDL库合并,以获得与Google在线文档中非常相似的视图。
这是一个示例文章模板,因此您可以了解一下它的外观。
该页面没有很多React组件,但是它展示了材料设计的美感。 您将在使用React组件构建的此演示中找到更多操作。
![ReactMDL模板](https://i-blog.csdnimg.cn/blog_migrate/93f075eefcef256efa6fe28d767f535e.png)
如果您想了解更多信息,实际上可以在GitHub存储库上找到有关Material Design Lite的更多信息。 您可以从那里下载原始CSS和JS,以实施到您的页面中,该页面自动支持所有现代浏览器和正常降级。
不幸的是,由于React MDL仍然很新,因此它不完全支持所有组件。
但是您可以在此处看到完整列表,包括每个列表的小示例。 这也包括一些源代码,您可以根据需要将其复制/粘贴到自己的项目中。
我不建议您学习React MDL,除非您已经对这两个库感到满意。
Material Design Lite套件的启动非常简单,但React却要复杂得多。
要了解有关MDL的更多信息,请查看其官方网站上的FAQ页面 。 它提供了有关在何处使用MDL,提供的功能以及如何使其适合典型的Webdev工作流的提示。
但是说实话,即使您不太了解React,您仍然可以通过组件页面上的所有示例获得帮助。 例如, 文本字段页面具有使用材料设计但带有React代码段的有效文本字段。
![ReactMDL文本字段](https://i-blog.csdnimg.cn/blog_migrate/102e85c756c11429353516bc91ca6d76.png)
随时随地玩耍,看看可以做什么。 这两个库对于个人或商业的所有项目都是完全免费和开源的。
如果您想研究源代码并深入研究,可以在React MDL GitHub页面上找到更多信息。