Material Design Component 4 Web 框架推送

MD不用多说了, GUI领域处于统治地位的规范, 上次我们介绍了基于MD实现的web框架mdl, 但是很遗憾mdl的开发团队于多年前放弃这个项目了, 取而代之的是MDC:

​​Material Design Component​​

MDC更像是一款ui插件而不是ui框架, 因为mdc里面每一个ui组件都是可以拿出来单独使用的.

在MDC的开发主页上我们可以看到, Google已经贴心的提供了4个端的插件, 分别是Android, IOS, Web以及自家的框架Flutter, 4个项目中Web的star数目是最多的(意料之中), 所以我们web开发者只要关注MDC for Web就好啦:

​​https://material.io/develop/web/​​

​​MDC web​​是Material Design Lite的继承者，在本文中，我们将介绍如何使用MDC Web的基本设置。

首先声明下MDC的学习成本并不容易, 它本身比较复杂, 但是功能却异常强大?

有两种方法可以包含MDC Web：通过添加几行代码并实例化JavaScript文件​或​使用MDC Web作为Node模块，使用webpack之类的东西自己捆绑Sass和JavaScript。

我们先来看看添加MDC Web的简单方法。

快速开始

首先，让我们创建一个空白​

​HTML​

​页面，然后创建一个简单的按钮。

<button class=”foo-button mdc-button”>Button</button>      

它有一个自定义CSS类。  ​

​.foo-button​

​当用户按下或点击按钮时，我们将使用此类来实例化JavaScript并为按钮提供Material Design涟漪效果。

什么都没发生，因为我们还没有添加主​

​CSS​

​​文件。您可以通过​

​<link>​

​​在​

​HTML​

​文档的头部添加一个指向我们CDN的链接：

<link rel=”stylesheet” href=”https://unpkg.com/material-components-web/dist/material-components-web.min.css">      

该按钮现在应该设置样式，但需要JS文件来启用涟漪效果。为此，我们现在需要将​

​JS​

​​文件添加到​

​HTML​

​doc：

<script src=”https://unpkg.com/material-components-web/dist/material-components-web.min.js"></script>      

拼图的最后一部分是实例化按钮。当我们给它一个自定义​

​CSS​

​​类时，我们将在调用中引用它。创建​

​JS​

​​文件或将其添加到您的​

​HTML​

​文档：

const button = document.querySelector(‘.foo-button’);
mdc.ripple.MDCRipple.attachTo(button);      

Material Design Icons

MDC还有一个核心成员是字体图标: 

​​https://material.io/tools/icons/?style=baseline​​

以前我都是使用​​fontawesome​​的, fontawesome有海量的图表但是大部分要付费才能使用(扣码比较累..), 总的来时fontawesome的质量不必MD的icon差, 但是, MDC框架在web领域的垄断地位带动了自己的icon走向主流, 你懂的嘛, 所以fontawesome永远只是一个字体图标, 但MDC自带了字体图标, 我们就默默地抛弃了fontawesome.

要查看一个工作示例，请转到​​Codepen​​​。我们还有许多工作组件，您可以在我们的​​网站目录中​​看到。但是现在让我们稍微定制我们的按钮，但使用MD Icons。首先，我们需要包含图标字体：

<link rel=”stylesheet” href=”https://fonts.googleapis.com/icon?family=Material+Icons">      

接下来让我们添加一个带有收藏夹图标的新按钮：

<button class=”bar-button mdc-button”>
<i class=”material-icons mdc-button__icon” aria-hidden=”true”>favorite</i>
    Favorite
</button>      

我们还可以通过向它们添加不同的类样式来编辑一些按钮样式。我们有六种不同的样式选项，默认为平面按钮。还有一个凸起的，未提升的，概述的图标。密集的。您可以​​在此处​​​查看​​有关按钮的​​​更多​​文档​​。

随着我们添加越来越多的按钮，上面的代码会变得非常重复。因此，我们可以通过以下两种方式之一进行重构：通过创建数组然后运行​

​forEach​

​循环​或​使用名为​​auto-init​​的实用程序。

​Foreach [ ​​Codepen​​​ ]​

const buttons = document.querySelectorAll(‘.mdc-button’);
for (const button of buttons) {
   mdc.ripple.MDCRipple.attachTo(button);
}      

​自动初始化[ ​​Codepen​​​ ]​

​MDC所有的html元素都要被js初始化一下才能'注入灵魂', 成为可用的UI元素, 但是一个个元素attachTo一下太麻烦了, MDC提供了一个一键初始化的api:​

​​https://material.io/develop/web/components/auto-init/​​

如果您正在创建一个基本的静态站点，auto-init是一个很棒的实用工具。您确实失去了对单个元素的控制，因此它仅适用于简单的网站。您需要添加一个​

​data-*​

​​属性，然后在​

​JS​

​文件中调用autoInit一次：

<button class=”mdc-button mdc-button — outlined” data-mdc-auto-init=”MDCRipple”>
   Outline
</button>      

然后在​

​JS​

​我们添加：

mdc.autoInit();      

就好啦.

SASS?

MDC对SASS提供了很好的支持, 但是那是对于框架本身的开发人员提供了方便(没错, MDC本质上是其他UI框架的底层组件, 并不专注于开发者'拿来即用', 谷歌很喜欢开发这种'depended-upon'的东西, 从chromium和思源黑体可以看出). 但是我还是喜欢直接拿来直接用, 虽然有时候麻烦了点, 但是官方支持的永不过时, 我喜欢在codepen上找现成的代码拿来用, 但是要自己修改一下, 很方便.

SASS和less一样都是css的预编译语言, 就和目前的typescript一样, 要编译成浏览器原生支持的JavaScript和css才能使用, 我并不是很喜欢这种开发模式, 因为一旦下一代浏览器的标准库支持了sass的语法, sass就过时了. 所以sass本身是个好东西但我不是很愿意去学.......因人而异吧?

总结

虽然MDC很有可能成为一个"基础框架"而不是一个适合拿来即用, 容易上手的组件, 但是还是墙裂推荐就把他拿来即用, 因为即使第三方框架更容易上手, 但是学习第三方的时间成本却很大, 而且第三方开发者众多, 很难保证质量, 只有Google自己开发的东西才有保障.