1. 简介
Material Components (MDC) 有助于开发者实现 Material Design。MDC 是由一组 Google 工程师和用户体验设计人员倾心打造的，提供数十种精美实用的界面组件，可用于 Android、iOS、Web 和 Flutter。如需了解详情，请访问 material.io/develop |
Material Components for Web (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>
添加涟漪
MDC 按钮可以在没有 JavaScript 的情况下使用。不过，向按钮添加互动涟漪可以打造更丰富的用户体验。
按 Ctrl+C 终止开发服务器。然后运行以下命令：
npm install @material/ripple npm start
将以下导入语句添加到 app.js 的顶部：
import {MDCRipple} from '@material/ripple';
如需在按钮上实例化涟漪，请将以下代码添加到 app.js 的底部：
new MDCRipple(document.querySelector('.mdc-button'));
导入 Roboto 字体
默认情况下，Material Design 使用 Roboto 作为组件字体。
在 index.html 中，通过将以下代码添加到 <head> 元素来导入 Roboto Web 字体：
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
重新加载页面，您应该会看到类似以下内容：
现在，按下按钮时，按钮会显示细微的涟漪效果作为视觉反馈。
4. 更新选择元素
MDC Select 组件封装了原生 HTML <select> 元素。您可以在通常使用 <select> 的任何位置使用它。让我们更新“状态” 字段。
安装 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
将以下导入语句添加到 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 "@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
将以下导入语句添加到 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 框架集成。