关于此 Codelab
1. 简介
Material Components (MDC) 有助于开发者实现 Material Design。MDC 是由一组 Google 工程师和用户体验设计人员倾心打造的,提供数十种精美实用的界面组件,可用于 Android、iOS、Web 和 Flutter.material.io/develop |
在 Codelab MDC-101 中,您使用以下两种 Material Components (MDC) 组件构建了一个登录页面界面:文本字段和按钮。下面,我们将在此基础上添加导航功能、结构和数据,来扩充此界面。
您将构建的内容
在此 Codelab 中,您将为名为 Shrine 的应用构建一个首页。Shrine 是一款销售服装和家居用品的电子商务应用。其中包含以下内容:
- 抽屉式导航栏
- 包含各种商品的图片列表
此 Codelab 中用到的 MDC Web 组件
- 抽屉式导航栏
- 图片列表
所需条件
- 较新版本的 Node.js(与 npm 捆绑在一起,npm 是一个 JavaScript 软件包管理器)。
- 示例代码(将在下一步中下载)
- 已掌握 HTML、CSS 和 JavaScript 方面的基础知识
您如何评价自己在 Web 开发方面的经验水平?
2. 设置您的开发环境
接着 MDC-101 继续操作?
如果您已完成 MDC-101,那么您应该已经准备好用于此 Codelab 的代码。请跳到第 3 步:添加抽屉式导航栏。
下载起始 Codelab 应用
起始应用位于 material-components-web-codelabs-master/mdc-102/starter
目录中。请务必先通过 cd
命令转到该目录,然后再开始操作。
…或从 GitHub 克隆
如需从 GitHub 克隆此 Codelab,请运行以下命令:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
安装项目依赖项
您的当前目录应为 material-components-web-codelabs/mdc-102/starter.
。请在该目录运行以下命令:
npm install
显示大量 activity 后,您的终端应该会显示已成功安装:
运行起始应用
在同一目录中,运行以下命令:
npm start
系统将启动 webpack-dev-server
。让浏览器指向 http://localhost:8080/,以查看相应页面。
大功告成!您应该会看到在 MDC-101 Codelab 中构建的 Shrine 登录页面。
现在,登录页面看起来没有问题,下面我们要在应用中填充一些商品。输入有效的用户名和密码,然后点击“Next”按钮转到首页。
3. 添加抽屉式导航栏
当用户登录时,系统会显示一个首页,其中提示“You did it!”太棒了!不过,现在用户需要采取行动,并了解他们在应用中所处的位置。为了帮助用户做到这一点,我们来添加导航功能。
Material Design 导航模式具有极高的易用性。Material 抽屉式导航栏提供导航功能以及快速访问其他操作的功能。我们来添加一个。
安装 MDC 抽屉式导航栏和列表
如需安装抽屉式导航栏组件的软件包,请运行以下命令:
npm install @material/drawer @material/list
添加 HTML
在 home.html
中,将“You did it!”替换为抽屉式导航栏及其导航项的以下标记:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
添加 CSS
在 home.scss
中,将以下 import 语句添加到现有 import 之后:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
在 home.scss
底部,添加以下样式:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
添加 JavaScript
我们需要在抽屉式导航栏中实例化 MDC 列表,以实现正确的键盘导航。打开 home.js
(当前为空),然后添加以下代码:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
刷新 http://localhost:8080/home.html 指向的页面。现在您的首页应如下所示:
现在,首页包含一个显示各种导航项的持续性抽屉式导航栏,其中第一项处于活动状态。
4. 添加带有文本标签的图片
现在,我们的应用已具有一些结构,接下来,我们需要将内容放到图片列表中,以便对内容进行整理。
安装 MDC 图片列表
如需安装图片列表组件的软件包,请运行以下命令:
npm install @material/image-list
为包含一项内容的列表添加 HTML
首先,我们在抽屉式导航栏旁边添加一个图片列表。我们先在该列表中添加一项内容,其中包含图片和文本标签。
在 home.html
中,将以下 HTML 添加到 <aside>
元素末尾后:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
该列表包含一个额外的类 product-list
,此类将在本教程中和 MDC-103 中应用自定义样式。
添加 CSS
首先,在 home.scss
中为图片列表组件样式添加一个 import,并将其置于现有 import 之后:
@import "@material/image-list/mdc-image-list";
接下来,将以下样式添加到初始首页样式之后:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
这些样式会指示图片列表在四列中显示图片,以确保图片列表独立于抽屉式导航栏进行滚动。
刷新页面。现在首页应如下所示:
图片列表旨在显示图片集中的多张图片,因此,我们来添加更多图片,以便更好地了解该组件的运作方式。
在 home.html
中,复制现有的 <li>
元素:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
然后,将它粘贴到现有项之后(结束 </ul>
标记之前)15 次。这样总共会生成 16 张图片。暂时不必担心图片和标题是否具有唯一性;您将在 MDC-103 中考虑此问题。
刷新。现在首页应如下所示:
图片列表每行会显示四张图片,并且这些图片会自动调整大小以适合可用的屏幕空间。
5. 回顾
网站的基本流程可将用户从登录页面转到首页,然后用户可在首页中查看商品。通过几行代码,您添加了抽屉式导航栏和图片列表来呈现内容。首页现在具有基本的结构和内容。
后续步骤
您现在使用了 MDC Web 库中的另外两个 Material Design 核心组件:抽屉式导航栏和图片列表。您可以访问 MDC Web Catalog 探索更多组件。
尽管首页具有完善的功能,但尚未表达任何特定的品牌或观点。在 MDC-103:通过颜色、形状、高度和类型设置 Material Design 主题中,您可以自定义这些组件的样式,以展现活力十足的现代品牌。