此页面由 Cloud Translation API 翻译。

MDC-101 Web：Material Components (MDC) 基础知识 (Web)

1. 简介

Material Components (MDC) 有助于开发者实现 Material Design。MDC 是由一组 Google 工程师和用户体验设计人员倾心打造的，提供数十种精美实用的界面组件，可用于 Android、iOS、Web 和 Flutter.material.io/develop

什么是 Material Design 和 Material Components for the Web？

Material Design 是一个系统，用于构建醒目、美观的数字产品。通过采用一套一致的原则和组件将样式、品牌、交互和动效结合起来，产品团队能够充分发挥其设计潜能。

对于桌面版网站和移动网站，Material Components Web (MDC Web) 将设计和工程与组件库相结合，可在应用和网站之间实现一致性。每个 MDC Web 组件都位于各自的节点模块中，因此随着 Material Design 系统不断发展，这些组件可以轻松更新，从而可确保一致且每个像素都无比完美的实现，并确保遵循 Google 的前端开发标准。MDC 也适用于 Android、iOS 和 Flutter。

在此 Codelab 中，您将使用 MDC Web 的若干组件构建一个登录页面。

您将构建的内容

我们提供了 3 个 Codelab 来引导您构建一款名为 Shrine 的应用，这是其中的第 1 个。Shrine 是一个销售服装和家居用品的电子商务网站。此 Codelab 将演示如何使用 MDC Web 自定义组件以反映任何品牌或风格。

在此 Codelab 中，您将为 Shrine 构建一个包含以下内容的登录页面：

两个文本字段，分别用于输入用户名和密码
两个按钮，分别对应“Cancel”和“Next”
网站的名称 (Shrine)
Shrine 徽标的图片

674d1ca8cfa98c9

此 Codelab 中用到的 MDC Web 组件

文本字段
按钮
涟漪

所需条件

最新版本的 Node.js（与 npm（一个 JavaScript 软件包管理器）捆绑在一起）。
示例代码（将在下一步中下载）
已掌握 HTML、CSS 和 JavaScript 方面的基础知识

我们一直在努力改进我们的教程。您如何评价自己在 Web 开发方面的经验水平？

<ph type="x-smartling-placeholder"></ph> 新手

中级

熟练

2. 设置您的开发环境

下载起始 Codelab 应用

起始应用位于 material-components-web-codelabs-master/mdc-101/starter 目录中。请务必先通过 cd 命令转到该目录，然后再开始操作。

…或从 GitHub 克隆

如需从 GitHub 克隆此 Codelab，请运行以下命令：

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

安装项目依赖项

在起始目录中，运行以下命令：

npm install

您会看到大量 activity，并且在最后，您的终端应该会显示已成功安装：

204c063d8fd78f94

如果没有，请运行 npm audit fix。

运行起始应用

在同一目录中，运行以下命令：

npm start

系统将启动 webpack-dev-server。将浏览器指向 http://localhost:8080/ 以查看该页面。

17c139dc5a9bebaf

大功告成！您的浏览器中现在应该正在运行 Shrine 登录页面的起始代码。您应该会看到名称“Shrine”以及该名称正下方的 Shrine 徽标。

查看代码

`index.html` 中的元数据

在起始目录中，使用您喜欢的代码编辑器打开 index.html。其中应包含以下代码：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

在此示例中，<link> 标记用于加载由 webpack 生成的 bundle-login.css 文件，并且 <script> 标记包含 bundle-login.js 文件。此外，我们还添加了 normalize.css（用于实现一致的跨浏览器渲染效果），以及 Google Fonts 中的 Roboto 字体。

`login.scss` 中的自定义样式

MDC Web 组件的样式是使用 mdc-* CSS 类（例如 mdc-text-field 类）设置的。（MDC Web 会将其 DOM 结构视为其公共 API 的一部分。）

一般而言，我们建议您使用自己的类对组件进行自定义样式修改。您可能已经注意到上述 HTML 中的某些自定义 CSS 类，例如 shrine-logo。这些样式在 login.scss 中定义，旨在向页面添加基本样式。

打开 login.scss，您会看到登录页面的以下样式：

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

现在，您已经熟悉了起始代码，接下来我们要实现第一个组件。

3. 添加文本字段

首先，我们将为登录页面添加两个文本字段，供用户输入用户名和密码。我们将使用 MDC 文本字段组件，其中包括可显示浮动标签并启用触摸涟漪效果的内置功能。

9ad8a7db0b50f07d

安装 MDC 文本字段

MDC Web 组件通过 NPM 软件包发布。如需安装文本字段组件的软件包，请运行以下命令：

npm install @material/textfield@^6.0.0

添加 HTML

在 index.html 中，将以下代码添加到主体代码的 <form> 元素内：

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDC 文本字段 DOM 结构由以下几个部分组成：

主元素 mdc-text-field
子元素 mdc-text-field__ripple, mdc-text-field__input、mdc-floating-label 和 mdc-line-ripple

添加 CSS

在 login.scss 中，将以下 import 语句添加到现有 import 之后：

@import "@material/textfield/mdc-text-field";

在同一文件中，添加以下样式，使文本字段对齐并居中：

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

添加 JavaScript

打开 login.js（当前为空）。添加以下代码以导入和实例化文本字段：

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

添加 HTML5 验证功能

通过使用由 HTML5 的表单验证 API 提供的属性，文本字段可指示字段输入是否有效或包含错误。

您应该：

为 Username 和 Password 文本字段的 mdc-text-field__input 元素添加 required 属性
将 Password（密码）文本字段的 mdc-text-field__input 元素的 minlength 属性设置为 "8"

调整两个 <label class="mdc-text-field mdc-text-field--filled"> 元素，使其如下所示：

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

通过 http://localhost:8080/ 刷新页面。您现在应该看到一个包含“用户名”和“密码”两个文本字段的页面！

点击这两个文本字段可查看浮动标签动画和线条涟漪动画（向外呈涟漪扩散的底部边框线）：

4. 添加按钮

接下来，我们将为登录页面添加两个按钮：“Cancel”和“Next”。我们将使用 MDC 按钮组件和 MDC 涟漪组件来完成标志性的 Material Design 水墨涟漪效果。

674d1ca8cfa98c9

安装 MDC 按钮

如需安装按钮组件的软件包，请运行以下命令：

npm install @material/button@^6.0.0

添加 HTML

在 index.html 中，将以下代码添加到 <label class="mdc-text-field mdc-text-field--filled password"> 元素的结束标记下方：

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

对于“Cancel”按钮，我们将使用默认按钮样式。不过，“Next”按钮将使用由 mdc-button--raised 类指明的凸起式样式变体。

为了便于以后轻松对齐，我们将两个 mdc-button 元素封装在一个 <div> 元素中。

添加 CSS

在 login.scss 中，将以下 import 语句添加到现有 import 之后：

@import "@material/button/mdc-button";

如需对齐按钮并在按钮周围添加外边距，请为 login.scss 添加以下样式：

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

为按钮添加水墨涟漪效果

当用户轻触或点击按钮时，按钮应以水墨涟漪效果显示回应。墨水涟漪组件需要使用 JavaScript，因此我们需要将其添加到页面中。

如需安装涟漪组件的软件包，请运行以下命令：

npm install @material/ripple@^6.0.0

在 login.js 顶部，添加以下 import 语句：

import {MDCRipple} from '@material/ripple';

如需实例化涟漪，请将以下代码添加到 login.js 中：

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

由于我们不需要保留对涟漪实例的引用，因此无需将其分配给变量。

大功告成！刷新页面。当您点击各个按钮时，系统会显示水墨涟漪效果。

在文本字段中填入有效值，然后按“NEXT”按钮。大功告成！您将继续在 MDC-102 中处理此页面。

5. 要点回顾

借助基本的 HTML 标记和几行 CSS 和 JavaScript，Material Components for the Web 库就帮助您创建了符合 Material Design 准则的精美登录页面，并在所有设备上呈现一致的外观和行为。

后续步骤

文本字段、按钮和涟漪是 MDC Web 库中的三个核心组件，但还有许多其他组件！您还可以探索 MDC Web 中的其余组件。

您可以访问 MDC-102：Material Design 结构和布局，了解抽屉式导航栏和图片列表。感谢您试用 Material Components。希望您喜欢此 Codelab！

我能够用合理的时间和精力完成此 Codelab

非常赞同

赞同

中立

不赞同

非常不赞同

我希望日后继续使用 Material Components

<ph type="x-smartling-placeholder"></ph> 非常赞同

赞同

一般

不赞同

非常不赞同

MDC-101 Web：Material Components (MDC) 基础知识 (Web)

1. 简介

什么是 Material Design 和 Material Components for the Web？

您将构建的内容

此 Codelab 中用到的 MDC Web 组件

所需条件

我们一直在努力改进我们的教程。您如何评价自己在 Web 开发方面的经验水平？

2. 设置您的开发环境

下载起始 Codelab 应用

…或从 GitHub 克隆

安装项目依赖项

运行起始应用

查看代码

index.html 中的元数据

login.scss 中的自定义样式

3. 添加文本字段

安装 MDC 文本字段

添加 HTML

添加 CSS

添加 JavaScript

添加 HTML5 验证功能

4. 添加按钮

安装 MDC 按钮

添加 HTML

添加 CSS

为按钮添加水墨涟漪效果

5. 要点回顾

后续步骤

我能够用合理的时间和精力完成此 Codelab

我希望日后继续使用 Material Components

`index.html` 中的元数据

`login.scss` 中的自定义样式