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

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

程式碼研究室簡介

subject上次更新時間:10月 11, 2020
account_circle作者:Liz Mitchell, Abhinay Omkar

1. 簡介

logo_components_color_2x_web_96dp.png

Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 工程師和使用者體驗設計師團隊打造,提供數十種精美且功能豐富的 UI 元件,適用於 Android、iOS、網頁和 Flutter.material.io/develop

在程式碼研究室 MDC-101 中,您使用兩個 Material 元件 (MDC) 建構登入頁面 UI:文字欄位和按鈕。現在,讓我們加入導覽、結構和資料,進一步擴充這一點。

在本程式碼研究室中,您會建構名為 Shrine 的應用程式首頁,該應用程式是電子商務應用程式販售服飾和居家用品。其中包含:

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

e2f359c254988d75.png

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

  • 導覽匣
  • 圖片清單

軟硬體需求

  • 新版 Node.js (JavaScript 套件管理員 npm 隨附)。
  • 程式碼範例 (將在下一個步驟中下載)
  • 具備 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 中,取代「您做到!」替換成以下導覽匣及其項目標記:

<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 網路程式庫中另外兩個 Material Design 核心元件!您可以前往 MDC Web Catalog 探索更多元件。

但首頁無法呈現任何特定的品牌或觀點。在 MDC-103:Material Design 主題設定搭配顏色、形狀、高度和類型,您將自訂這些元件的樣式,呈現一種鮮豔的現代品牌。

我可以在合理的時間內,完成本程式碼研究室

我想日後繼續使用 Material Design 元件