MDC-102 Web:Material 结构和布局 (Web)

MDC-102 Web:Material 结构和布局 (Web)

关于此 Codelab

subject上次更新时间:10月 11, 2020
account_circleLiz Mitchell, Abhinay Omkar 编写

1. 简介

logo_components_color_2x_web_96dp.png

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

在 Codelab MDC-101 中,您使用以下两种 Material Components (MDC) 组件构建了一个登录页面界面:文本字段和按钮。下面,我们将在此基础上添加导航功能、结构和数据,来扩充此界面。

您将构建的内容

在此 Codelab 中,您将为名为 Shrine 的应用构建一个首页。Shrine 是一款销售服装和家居用品的电子商务应用。其中包含以下内容:

  • 抽屉式导航栏
  • 包含各种商品的图片列表

e2f359c254988d75.png

此 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 后,您的终端应该会显示已成功安装:

23003b0e5fdf9077.png

运行起始应用

在同一目录中,运行以下命令:

npm start

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

4e04758051693865.png

大功告成!您应该会看到在 MDC-101 Codelab 中构建的 Shrine 登录页面。

6c206785707bee2e.png

现在,登录页面看起来没有问题,下面我们要在应用中填充一些商品。输入有效的用户名和密码,然后点击“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 指向的页面。现在您的首页应如下所示:

9c145acccbc28214

现在,首页包含一个显示各种导航项的持续性抽屉式导航栏,其中第一项处于活动状态。

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;
}

这些样式会指示图片列表在四列中显示图片,以确保图片列表独立于抽屉式导航栏进行滚动。

刷新页面。现在首页应如下所示:

5362b330204ffd58.png

图片列表旨在显示图片集中的多张图片,因此,我们来添加更多图片,以便更好地了解该组件的运作方式。

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 中考虑此问题。

刷新。现在首页应如下所示:

e2f359c254988d75.png

图片列表每行会显示四张图片,并且这些图片会自动调整大小以适合可用的屏幕空间。

5. 回顾

网站的基本流程可将用户从登录页面转到首页,然后用户可在首页中查看商品。通过几行代码,您添加了抽屉式导航栏和图片列表来呈现内容。首页现在具有基本的结构和内容。

后续步骤

您现在使用了 MDC Web 库中的另外两个 Material Design 核心组件:抽屉式导航栏和图片列表。您可以访问 MDC Web Catalog 探索更多组件。

尽管首页具有完善的功能,但尚未表达任何特定的品牌或观点。在 MDC-103:通过颜色、形状、高度和类型设置 Material Design 主题中,您可以自定义这些组件的样式,以展现活力十足的现代品牌。

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

我希望日后继续使用 Material Components