MDC-102 Web：Material Design 結構和版面配置 (網頁)

1. 簡介

logo_components_color_2x_web_96dp.png

開發人員可透過 Material 元件 (MDC) 實作 Material Design。MDC 由 Google 的工程師和 UX 設計師團隊建立，提供數十種美觀實用的 UI 元件，適用於 Android、iOS、網頁和 Flutter。material.io/develop

在 Codelab MDC-101 中，您使用了兩個 Material 元件 (MDC) 建構登入頁面 UI：文字欄位和按鈕。現在，我們將新增導覽、結構和資料，進一步擴充這個應用程式。

建構項目

在本程式碼研究室中，您將為名為「Shrine」的應用程式建構首頁。這個電子商務應用程式販售服飾和居家用品。其中包含：

  • 導覽匣
  • 滿滿產品的圖片清單

e2f359c254988d75.png

本程式碼研究室中的 MDC Web 元件

  • 導覽匣
  • 圖片清單

軟硬體需求

  • 最新版 Node.js (隨附 npm，這是 JavaScript 套件管理工具)。
  • 程式碼範例 (將在下一個步驟中下載)
  • 具備 HTML、CSS 和 JavaScript 的基本知識

您對網頁開發的經驗程度為何？

新手 中級 熟練

2. 設定開發環境

是否要從 MDC-101 繼續？

如果您已完成 MDC-101，程式碼應該已準備好用於本程式碼研究室。跳到步驟 3：新增導覽匣。

下載程式碼研究室的入門應用程式

入門應用程式位於 material-components-web-codelabs-master/mdc-102/starter 目錄中。開始前，請務必 cd 到該目錄。

...或從 GitHub 複製

如要從 GitHub 複製本程式碼研究室，請執行下列指令：

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

出現大量活動後，終端機應會顯示安裝成功：

23003b0e5fdf9077.png

執行範例應用程式

在同一個目錄中執行下列指令：

npm start

webpack-dev-server就會開始。將瀏覽器設為指向 http://localhost:8080/，即可查看網頁。

4e04758051693865.png

太棒了，您應該會看到 MDC-101 程式碼研究室的 Shrine 登入頁面。

6c206785707bee2e.png

登入頁面現在看起來不錯，接下來請在應用程式中填入一些產品。輸入有效的使用者名稱和密碼，然後按一下「下一步」按鈕前往首頁。

3. 新增導覽匣

使用者登入後，系統會顯示首頁，並顯示「你成功了！」太好了！但現在使用者需要採取行動，並瞭解自己在應用程式中的位置。為此，我們來新增導覽功能。

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 "@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.png

現在首頁會顯示永久性導覽匣，當中列出各種導覽項目，且第一個項目處於使用中狀態。

4. 新增附有文字標籤的圖片

現在應用程式已具備一些結構，接下來請將內容放入圖片清單，以便整理。

安裝 MDC 圖片清單

如要安裝圖片清單元件的套件，請執行：

npm install @material/image-list

新增含有一個項目的清單的 HTML

首先，在導覽匣旁新增圖片清單。我們會先新增單一項目來建立清單，該項目包含圖片和文字標籤。

在 home.html 中，於 <aside> 元素結尾後方新增下列 HTML：

<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 "@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 目錄。

雖然功能齊全，但首頁尚未展現任何特定品牌或觀點。在 MDC-103：使用顏色、形狀、高度和類型建立質感設計主題中，您將自訂這些元件的樣式，展現充滿活力、現代的品牌形象。

我能夠在合理的時間和精力內完成本程式碼研究室

非常同意 同意 沒意見 不同意 非常不同意

我希望日後繼續使用 Material Design 元件

非常同意 同意 沒意見 不同意 非常不同意