MDC-101 網頁：Material Design 元件 (MDC) 基本概念 (網頁)

1. 簡介

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

什麼是 Material Design 和 Material Components for the Web？

Material Design 是一套系統，可協助您打造大膽且美觀的數位產品。只要在一致的原則和元件下整合樣式、品牌、互動和動態效果，產品團隊就能發揮最大的設計潛力。

對於電腦和行動版網站，Material Components Web (MDC Web) 結合設計和工程，提供元件庫，可在應用程式和網站中建立一致性。MDC Web 元件各自位於自己的節點模組中，因此隨著 Material Design 系統演進，這些元件可以輕鬆更新，確保實作方式完全一致，並符合 Google 的前端開發標準。MDC 也適用於 Android、iOS 和 Flutter。

在本程式碼研究室中，您將使用多個 MDC Web 元件建構登入頁面。

建構項目

本程式碼研究室是三部系列的第一部，將引導您建構名為「Shrine」的應用程式，這是一個販售服飾和居家用品的電子商務網站。並說明如何使用 MDC Web 自訂元件，反映任何品牌或風格。

在本程式碼研究室中，您將為 Shrine 建構登入頁面，其中包含：

兩個文字欄位，一個用於輸入使用者名稱，另一個用於輸入密碼
兩個按鈕，分別是「取消」和「下一步」
網站名稱 (Shrine)
Shrine 標誌的圖片

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

文字欄位
按鈕
漣漪

軟硬體需求

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

我們一直致力於提升教學課程品質，您對網頁開發的經驗程度為何？

新手

中級

熟練

2. 設定開發環境

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

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

...或從 GitHub 複製

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

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

安裝專案依附元件

從入門目錄執行：

npm install

您會看到許多活動，最後終端機應該會顯示安裝成功：

如果沒有，請執行 npm audit fix。

執行範例應用程式

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

npm start

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

太棒了，瀏覽器應會執行 Shrine 登入頁面的啟動程式碼。您應該會看到「Shrine」名稱，以及正下方的 Shrine 標誌。

查看程式碼

`index.html` 中的中繼資料

在起始目錄中，使用慣用的程式碼編輯器開啟 index.html。其中應包含下列項目：

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

這裡使用 <link> 標記載入 webpack 產生的 bundle-login.css 檔案，而 <script> 標記則包含 bundle-login.js 檔案。此外，我們還納入 normalize.css，確保跨瀏覽器轉譯作業一致，以及 Google 字型的 Roboto 字型。

`login.scss` 中的自訂樣式

MDC Web 元件的樣式是使用 mdc-* CSS 類別設定，例如 mdc-text-field 類別。(MDC Web 將其 DOM 結構視為公用 API 的一部分)。

一般來說，建議您使用自己的類別，對元件進行自訂樣式修改。您可能已注意到上述 HTML 中的一些自訂 CSS 類別，例如 shrine-logo。這些樣式是在 login.scss 中定義，可為網頁新增基本樣式。

開啟 login.scss，您會看到登入頁面的下列樣式：

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

您已熟悉範例程式碼，接下來要實作第一個元件。

3. 新增文字欄位

首先，我們會在登入頁面中加入兩個文字欄位，供使用者輸入使用者名稱和密碼。我們將使用 MDC 文字欄位元件，其中內建的功能可顯示浮動標籤並啟用觸控漣漪。

安裝 MDC 文字欄位

MDC Web 元件會透過 NPM 套件發布。如要安裝文字欄位元件的套件，請執行：

npm install @material/textfield@^6.0.0

新增 HTML

在 index.html 中，於主體的 <form> 元素內新增下列內容：

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

MDC 文字欄位 DOM 結構由多個部分組成：

主要元素 mdc-text-field
子元素 mdc-text-field__ripple, mdc-text-field__input、mdc-floating-label 和 mdc-line-ripple

新增 CSS

在 login.scss 中，於現有匯入項目後方新增下列匯入陳述式：

@import "@material/textfield/mdc-text-field";

在同一個檔案中，新增下列樣式來對齊文字欄位並置中：

.username,
.password {
  display: flex;
  margin: 20px auto;
  width: 300px;
}

新增 JavaScript

開啟目前空白的 login.js。新增下列程式碼，匯入並例項化文字欄位：

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

新增 HTML5 驗證

文字欄位會使用 HTML5 表單驗證 API 提供的屬性，表示欄位輸入內容是否有效或含有錯誤。

請採取以下措施：

在「使用者名稱」和「密碼」文字欄位的 mdc-text-field__input 元素中，加入 required 屬性
將「密碼」文字欄位的 mdc-text-field__input 元素 minlength 屬性設為 "8"

將兩個 <label class="mdc-text-field mdc-text-field--filled"> 元素調整成如下所示：

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

在 http://localhost:8080/ 重新整理頁面，現在應該會看到一個頁面，其中有兩個文字欄位，分別是使用者名稱和密碼！

按一下文字欄位，即可查看浮動標籤動畫和線條漣漪動畫 (向外擴散的底部邊框線)：

4. 新增按鈕

接著，我們會在登入頁面新增兩個按鈕：「取消」和「下一步」。我們將使用 MDC 按鈕元件和 MDC 波紋元件，完成經典的 Material Design 墨水波紋效果。

安裝 MDC 按鈕

如要安裝按鈕元件的套件，請執行：

npm install @material/button@^6.0.0

新增 HTML

在 index.html 中，於 <label class="mdc-text-field mdc-text-field--filled password"> 元素的結尾標記下方新增下列內容：

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

「取消」按鈕則使用預設按鈕樣式。不過，「Next」按鈕使用 raised 樣式變體，這由 mdc-button--raised 類別表示。

為方便日後對齊，我們將兩個 mdc-button 元素包裝在 <div> 元素中。

新增 CSS

在 login.scss 中，於現有匯入項目後方新增下列匯入陳述式：

@import "@material/button/mdc-button";

如要對齊按鈕並在周圍新增邊界，請將下列樣式新增至 login.scss：

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

在按鈕中新增墨水漣漪效果

使用者輕觸或點選按鈕時，系統應以墨水漣漪的形式顯示回饋。墨水漣漪元件需要 JavaScript，因此我們會將其新增至網頁。

如要安裝漣漪元件的套件，請執行：

npm install @material/ripple@^6.0.0

在 login.js 頂端新增下列匯入陳述式：

import {MDCRipple} from '@material/ripple';

如要例項化波紋，請在 login.js 中新增下列項目：

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

由於我們不需要保留波紋執行個體的參照，因此不需要將其指派給變數。

大功告成！重新整理頁面。點選每個按鈕時，都會顯示墨水漣漪效果。

在文字欄位中填入有效值，然後按下「下一步」按鈕。你成功了！您將在 MDC-102 中繼續處理這個頁面。

5. 重點回顧

您使用基本的 HTML 標記，以及幾行 CSS 和 JavaScript，透過網頁專用的 Material Components 程式庫，建立符合 Material Design 指南的美觀登入頁面，並確保網頁在所有裝置上呈現一致的外觀和行為。

後續步驟

「文字欄位」、「按鈕」和「漣漪」是 MDC 網頁元件庫的三個核心元件，但還有更多元件！您也可以探索 MDC Web 中的其餘元件。

如要瞭解導覽匣和圖片清單，請前往「MDC-102：Material Design 結構和版面配置」。感謝您試用 Material Components。希望您喜歡這個程式碼研究室！

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

非常同意

同意

沒意見

不同意

非常不同意

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

非常同意

同意

沒意見

不同意

非常不同意

MDC-101 網頁：Material Design 元件 (MDC) 基本概念 (網頁)

1. 簡介

什麼是 Material Design 和 Material Components for the Web？

建構項目

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

軟硬體需求

我們一直致力於提升教學課程品質，您對網頁開發的經驗程度為何？

2. 設定開發環境

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

...或從 GitHub 複製

安裝專案依附元件

執行範例應用程式

查看程式碼

index.html 中的中繼資料

login.scss 中的自訂樣式

3. 新增文字欄位

安裝 MDC 文字欄位

新增 HTML

新增 CSS

新增 JavaScript

新增 HTML5 驗證

4. 新增按鈕

安裝 MDC 按鈕

新增 HTML

新增 CSS

在按鈕中新增墨水漣漪效果

5. 重點回顧

後續步驟

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

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

`index.html` 中的中繼資料

`login.scss` 中的自訂樣式