MDC-102 網頁：材料結構和版面配置 (網頁)

logo_components_color_2x_web_96dp.png

質感元件 (MDC) 可協助開發人員實作質感設計。MDC 由 Google 的工程師和使用者體驗設計師團隊組成，提供數十種美觀且功能完善的 UI 元件，適用於 Android、iOS、網路和 Flutter。

material.io/develop

在程式碼研究室的 MDC-101 中，您使用兩個 Material Components (MDC) 建立登入頁面 UI：文字欄位和按鈕。現在，我們加入導覽、結構和資料來擴大搜尋範圍。

建構項目

在這個程式碼研究室中，您將為「Shrine」這個電子商務應用程式建立一個首頁，銷售服飾和居家用品。內容如下：

  • 導覽匣
  • 完整產品的圖片清單

這個程式碼研究室中的 MDC 網頁元件

  • 導覽匣
  • 圖片清單

軟硬體需求

  • 最新版本的 Node.js (隨附為 JavaScript 套件管理員 npm)。
  • 範例程式碼 (將於下一個步驟下載)
  • HTML、CSS 和 JavaScript 基礎知識

您對於網站開發經驗的體驗程度為何？

初級 中級 專業

持續使用 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

系統顯示大量活動後，您的終端機應該會顯示成功的安裝：

執行啟動應用程式

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

npm start

webpack-dev-server 將會啟動。將瀏覽器指向 http://localhost:8080/ 以查看網頁。

完成了，你應該會看到 MDC-101 程式碼研究室的神社登入頁面。

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

使用者登入時，系統會顯示首頁，顯示「恭喜您！」好極了！不過現在，我們的使用者需要採取行動，並瞭解他們在應用程式中的位置。為了協助使用者解決問題，我們來加入導覽功能。

質感設計導覽模式提供了高度的可用性。「Material 導覽匣」提供導覽功能，讓您快速存取其他動作。我們來新增一組。

安裝 MDC 導覽匣和清單

如要安裝導覽匣元件的套件，請執行：

npm install @material/drawer @material/list

新增 HTML

在 home.html 中，以「以下動作取代」！

<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。您的首頁應該如下所示：

現在這個首頁有一個固定的導覽匣，用來顯示多種導覽項目，其中第一個項目為有效。

現在，我們的應用程式具有某些結構，現在讓我們將內容放在圖片清單中，以便整理內容。

安裝 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 "@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 中的圖片。

重新整理。現在首頁應如下所示：

圖片清單每列顯示四張圖片，而圖片會配合可用的螢幕空間自動調整大小。

您的網站有基本流程，引導使用者從登入網頁前往可以瀏覽產品的首頁。只要幾行程式碼就能新增導覽匣和圖片清單來呈現內容。首頁現在有基本架構和內容。

後續步驟

有了導覽匣和圖片清單，您已經使用 MDC 網頁庫中另外兩個 Material Design 核心元件！如要探索其他元件，請前往 MDC 網頁目錄。

雖然首頁仍可正常運作，但首頁尚未展現任何特定品牌或觀點。在 MDC-103：採用色彩、形狀、海拔高度和類型的質感設計主題中，您將自訂這些元件的樣式，以展現一個活力十足的現代品牌。

我以合理的時間和心力完成了這個程式碼研究室

非常同意 同意 普通 不同意 非常不同意

我要在日後繼續使用 Material Components

非常同意 同意 普通 不同意 非常不同意