1. 简介
Material Components (MDC) 有助于开发者实现 Material Design。MDC 是由一组 Google 工程师和用户体验设计人员倾心打造的，提供数十种精美实用的界面组件，可用于 Android、iOS、Web 和 Flutter.material.io/develop |
Material 组件 (MDC Web) 与框架无关，使用常规 JavaScript 构建。这有助于使 MDC Web 与您的开发流程无缝协作。可根据需要安装这些组件，以帮助在现有应用中实现敏捷的设计改进。
构建内容
在此 Codelab 中，您将将表单中的某些现有组件替换为 MDC Web 提供的组件：
此 Codelab 中用到的 MDC Web 组件
- 按钮
- 选择
- 文本字段
所需条件
- 较新版本的 Node.js（与 npm 捆绑在一起，npm 是一个 JavaScript 软件包管理器）。
- 示例代码（将在下一步中下载）
- 已掌握 HTML、CSS 和 JavaScript 方面的基础知识
您如何评价自己在 Web 开发方面的经验水平？
2. 设置您的开发环境
下载起始 Codelab 应用
起始应用位于 material-components-web-codelabs-master/mdc-111/starter 目录中。请务必先通过 cd 命令转到该目录，然后再开始操作。
…或从 GitHub 克隆
如需从 GitHub 克隆此 Codelab，请运行以下命令：
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-111/starter
安装项目依赖项
从起始目录 (material-components-web-codelabs/mdc-111/starter) 中，运行以下命令：
npm install
您会看到大量 activity，并且在最后，您的终端应该会显示已成功安装：
运行起始应用
在起始目录中，运行以下命令：
npm start
系统将启动 webpack-dev-server。将浏览器指向 http://localhost:8080/ 以查看该页面。
大功告成！您应该会看到应用的送货地址表单：
3. 更新按钮
安装 MDC 按钮
按 Ctrl+C 可终止开发服务器。然后，安装 MDC 按钮 NPM 软件包并重启服务器：
npm install @material/button npm start
导入 CSS
在 _theme.scss 的顶部，删除 .crane-button { ... } 代码块，并在其位置添加以下代码：
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
更新标记
在 index.html 中，从 <button> 元素中移除 crane-button 类，添加 mdc-button 和 mdc-button--raised 类，并将标签嵌套在具有 mdc-button__label 类的 <span> 元素中：
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
添加涟漪效果
无需 JavaScript 即可使用 MDC 按钮。不过，为按钮添加互动式涟漪效果可打造更丰富的用户体验。
按 Ctrl+C 可终止开发服务器。然后运行以下命令：
npm install @material/ripple npm start
将以下 import 语句添加到 app.js 的顶部：
import {MDCRipple} from '@material/ripple';
如需实例化按钮上的涟漪，请将以下代码添加到 app.js 的底部：
new MDCRipple(document.querySelector('.mdc-button'));
导入 Roboto 字体
默认情况下，Material Design 使用 Roboto 作为组件字体。
在 index.html 中，将以下代码添加到 <head> 元素中，以导入 Roboto 网页字体：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
重新加载页面，您应该会看到如下内容：
现在，按下按钮时，按钮会显示细微的涟漪效果作为视觉反馈。
4. 更新 select 元素
MDC Select 组件会封装原生 HTML <select> 元素。您可以在通常使用 <select> 的地方使用它。我们来更新“State”字段。
安装 MDC Node 模块
按 Ctrl+C 可终止开发服务器。然后运行以下命令：
npm install @material/select npm start
导入 CSS
将以下代码添加到 _theme.scss 中的按钮导入语句后面：
@import "@material/select/mdc-select";
更新标记
在 index.html 中找到 <select> 元素。将 crane-input 类替换为 mdc-select__native-control：
<select class="mdc-select__native-control" id="crane-state-input" required>
在 <select> 标记的正上方，为 MDC Select 组件的下拉箭头添加以下标记：
<i class="mdc-select__dropdown-icon"></i>
在 </select> 结束标记正下方，将 crane-label 类替换为 mdc-floating-label：
<label class="mdc-floating-label" for="crane-state-input">
然后，在标签后面立即添加以下标记：
<div class="mdc-line-ripple"></div>
最后，在 <select> 元素周围（但在 crane-field 元素内）添加以下标记：
<div class="mdc-select">
...
</div>
生成的标记应如下所示：
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
导入 JS
将以下 import 语句添加到 app.js 的顶部：
import {MDCSelect} from '@material/select';
如需实例化选择，请将以下代码添加到 app.js 的底部：
new MDCSelect(document.querySelector('.mdc-select'));
重新加载页面，该页面现在应如下所示：
MDC Select 组件以您熟悉的格式，但具有现代的样式，为用户呈现一个选项列表。
5. 更新文本字段
与普通的 <input> 元素相比，Material Design 文本字段在易用性方面有很大提升。它们在复杂内容中易于识别，并会在用户与其互动时显示细微的视觉反馈。
安装 MDC Node 模块
按 Ctrl+C 终止开发服务器。然后运行以下命令：
npm install @material/textfield npm start
添加 CSS
将以下代码添加到 _theme.scss 中，紧跟所选 import 后面：
@import "@material/textfield/mdc-text-field";
更新标记
在 index.html 中，找到“名称”字段的 <input> 元素。将 crane-input 类替换为 mdc-text-field__input：
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
接下来，将 crane-label 类替换为 mdc-floating-label：
<label class="mdc-floating-label" for="crane-name-input">
然后，在标签后面立即添加以下标记：
<div class="mdc-line-ripple"></div>
最后，使用以下代码封装所有 3 个元素：
<div class="mdc-text-field">
...
</div>
生成的标记应如下所示：
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
对页面上的所有其他 <input> 元素重复相同的过程。
“地址”“城市”和“邮政编码”字段的标记应如下所示：
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
现在，您可以从 _theme.scss 中移除不再使用的 .crane-label 和 .crane-input 样式。
导入 JS
将以下 import 语句添加到 app.js 的顶部：
import {MDCTextField} from '@material/textfield';
如需实例化文本字段，请将以下代码添加到 app.js 的底部：
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
重新加载页面，页面现在应如下所示：
文本字段现已全部更新为使用 Material 主题设置。
6. 要点回顾
您替换了一些常见组件（文本字段、选择和按钮），但没有对应用进行彻底的重新设计。太棒了！
其他可能产生重大影响的组件包括顶部应用栏和抽屉式导航栏。
后续步骤
您可以访问 MDC Web 目录，探索 MDC Web 中的更多组件。
如果您有兴趣将 MDC Web 与特定框架搭配使用，请参阅 MDC-112：将 MDC 与 Web 框架集成。