Material Design Component 4 Web 框架推送 _material design components-优快云博客

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

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文件添加到HTMLdoc：

<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本身是个好东西但我不是很愿意去学.......因人而异吧?