MDC – Get Started

前言

Angular Material 为了更好的和 Material Design 保持一致, 放弃了自己开发, 改而使用 wrapping MDC 的方式来维护 Angular Material.

Youtube – NG Conf 2019 Day 3 CDK Is The Coolest Thing You Are Not Using With Jeremy Elbourn

这是一件令人沮丧的事情, 因为从来没有一个 framework 能 wrapping MDC 成功. 从来没有,

Angular Team 也不会例外. 从提出到现在已经 3 年了, 依然属于 experimental 的状态.

不是 wrapping 吗? 不是应该很顺利的吗? 都不用实现只是 wrap 而已丫... 显然并不是那么简单的. Material Design 本身就有许多问题, 加上团队人员其实并不熟悉 UI/UX 他们只是会开发而已.

这就导致了更难去实现这些组件. 一旦 Material Design 有修改, 他们需要很多精力才能跟上, 所以整个进度是非常缓慢的.

吐槽归吐槽, 好的 UI 库肯定是收费的, 自己搞一套 Design System 自己做组件也很累啊. 所以即使知道很多问题还是得用, 毕竟也没有多少选择.

为了更好的使用 Angular Material 和用 Material Design 在非 Angular 的项目上, 我开始学习 MDC. 之后会陆陆续续把我有用到组件记入在这个栏目里.

想知道 Angular Material, MDC, MWC, Lit 的关系看这篇.

参考

Github – Material Components for the web

Google Developers Codelabs – MDC-101 Web, MDC-102 Web, and MDC-103 Web

Youtube – Material.io Web Components Tutorial

Material Design Component 4 Web 框架推送

Installation

它可以使用 CDN 直接插入 <script> 然后全局调用 window.mdc.

但我的项目都是用打包工具 (Webpack) 的, 所以之后都会以 Webpack 的形式教.

参考: Webpack 学习笔记

MDC 会用到 Scss 和 TypeScript, 所以 Webpack 需要 setup 这些哦.

Start with Material Button

搭建好 Webpack 环境后, 我们来试试看搞一个 material button 出来, 作为最简单的 startup.

首先, MDC 是给那些搞 UI 库的人用的, 所以它只有文档, 没有教程. 调用体验也不会太好.

下面是使用它的步骤:

1. find documentation

github 有所有的 material component 文档 master/packages

找到指定的 mdc-button

2. copy/paste HTML

有点和使用 Bootstrap 类似, 上面文档里面有写好的 HTML

<button class="mdc-button mdc-button--raised">
  <span class="mdc-button__ripple"></span>
  <span class="mdc-button__focus-ring"></span>
  <span class="mdc-button__label">Contained Button</span>
</button>

它的 class 是用 BEM 命名的.

2. install package

yarn add @material/button

每一个组件都是独立的一个 package, 都需要 yarn add. 所以 package.json 会有很长的 list...

3. @use Scss

@use "@material/button/styles";

或者用 CSS Link

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

这时 button 已经有设计了.

但少了一些交互的体验, 比如 ripple effect, 因为 ripple 需要依赖 JavaScript. 所以除了 import Scss, 也需要 import TypeScript

4. import TypeScript

import { MDCRipple } from '@material/ripple';
new MDCRipple(document.querySelector('.mdc-button')!);

所有的 TS 调用手法都类似, import 一个 class, 然后实例化这个 class 传入想 setup 的 element.

它会返回一个 instance, 如果想做后续的 config 或者监听可以在 instance 上面做. 和使用 jQuery 的方式很像, 只不过它是以实例化 class 的方式开始.

这时就有 ripple 效果了.

Auto Init & Get Instance from Element

参考: Docs – Auto Init

Auto init 主要是方便 setup TypeScript 的部分.

在 HTML 添加 data-mdc-auto-init, 值可以是任何一个 string 名字

<button class="mdc-button mdc-button--raised" data-mdc-auto-init="MDCRipple">

然后在 TypeScript 使用

import mdcAutoInit from '@material/auto-init'; // import init method
import { MDCRipple } from '@material/ripple'; // import class

mdcAutoInit.register('MDCRipple', MDCRipple); // register mapping
// can listen on init done
document.addEventListener('MDCAutoInit:End', () => {
  console.log('done init');
});
mdcAutoInit(document); // run the binding

搞一个 mapping, 最后调用 mdcAutoInit, 它会去 query document 找出所有的 data-mdc-auto-init

然后通过 mapping 找到对应的 class 去实例化.

要获取 instance 的话, 需要从 element 属性里拿出来, 不是很优雅

const instance = document.querySelector<Element & { MDCRipple: MDCRipple }>(
  '.mdc-button'
)!.MDCRipple;

p.s. 只有用 init 方式才能从 element 获取 instance 哦,

这种模式通常时用在 rich text editor 的情况. 比如让用户通过 editor 做 Landing Page 设计.