程式碼研究室簡介
1. 簡介
Material Design 元件 (MDC) 可協助開發人員實作質感設計。MDC 是由 Google 的工程師和使用者體驗設計師團隊所開發,提供數十種美觀實用的 UI 元件,適用於 Android、iOS、網頁和 Flutter。material.io/develop |
在程式碼研究室 MDC-101 中,您使用兩個 Material 元件 (MDC) 建構登入頁面 UI:文字欄位和按鈕。接下來,我們將透過新增導覽、結構和資料來擴充這個範例。
建構項目
在本程式碼研究室中,您將為名為 Shrine 的應用程式建構首頁,這是一款販售服飾和家居用品的電子商務應用程式。其中包含:
- 導覽匣
- 產品圖片清單
本程式碼研究室中的 MDC 網頁元件
- 導覽匣
- 圖片清單
軟硬體需求
請評估你對網頁開發的經驗程度。
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
大量活動出現後,終端機應會顯示安裝成功:
執行範例應用程式
在同一個目錄中執行下列指令:
npm start
webpack-dev-server
就會開始。將瀏覽器指向 http://localhost:8080/,即可查看該網頁。
大功告成!您應該會在 MDC-101 程式碼研究室中看到 Shrine 登入頁面。
登入頁面看起來不錯,現在讓我們在應用程式中填入一些產品。輸入有效的使用者名稱和密碼,然後點選「下一步」按鈕前往首頁。
3. 新增導覽匣
使用者登入後,主畫面會顯示「You did it!」(您成功了!),太好了!不過,使用者現在需要採取行動,並瞭解自己在應用程式中的位置。為此,我們新增導覽功能。
Material Design 導覽模式可提供高可用性。Material Design 導覽匣可提供導覽功能,讓使用者快速存取其他動作。新增一個值吧。
安裝 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 的網頁。您的首頁現在應如下所示:
主畫面現在有一個持續性導覽匣,可顯示各種導覽項目,其中第一個項目處於啟用狀態。
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;
}
這些樣式會指示圖片清單在四個欄中顯示圖片,確保圖片清單可獨立於抽屜捲動。
重新整理頁面。首頁現在應如下所示:
圖片清單的用途是在集合中顯示多張圖片,因此您可以新增更多圖片,以便進一步查看元件的運作方式。
在 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 網路程式庫中另外兩個 Material Design 核心元件!您可以前往 MDC Web Catalog 探索更多元件。
雖然這個網站運作正常,但首頁尚未表達任何特定品牌或觀點。在 MDC-103:利用顏色、形狀、高度和類型建立 Material Design 主題 單元中,您將自訂這些元件的樣式,展現鮮明、現代的品牌形象。