本頁面由 Cloud Translation API 翻譯而成。

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

1. 簡介

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

什麼是網頁版的 Material Design 和 Material Design 元件？

Material Design 是打造搶眼數位產品的系統。產品團隊只要遵循一致的原則和元件組合，將樣式、品牌宣傳、互動和動畫一貫化，就能實現最大的設計潛力。

在電腦版和行動版網站中，Material 元件網頁(MDC Web) 將設計和工程與元件庫相結合，藉此確保應用程式和網站之間的一致性。MDC Web 元件各自位於其本身的節點模組中，因此隨著 Material Design 系統不斷演進，您可以輕易更新這些元件，以確保像素的實作一致，並且符合 Google 的前端開發標準。MDC 也有適用於 Android、iOS 和 Flutter。

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

建構項目

程式碼研究室之一，可引導您建構名為 Shrine 的應用程式；這個程式碼研究室是電子商務網站，專門販售服飾和居家用品。示範如何使用 MDC 網頁，自訂元件來反映任何品牌或風格。

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

兩個文字欄位，一個用於輸入使用者名稱，另一個則用於密碼
兩個按鈕，一個用於「取消」以及「下一首」
網站名稱 (Shrine)
神殿的標誌圖片

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

文字欄位
按鈕
漣漪

軟硬體需求

新版 Node.js (JavaScript 套件管理員 npm 隨附)。
程式碼範例 (將在下一個步驟中下載)
具備 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

安裝專案依附元件

從 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 Fonts 的 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 的 form Verification API 提供的屬性，讓文字欄位輸入有效或包含錯誤。

請採取以下措施：

同時為「Username」和「Password」文字欄位的 mdc-text-field__input 元素新增 required 屬性
將「Password」文字欄位的 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」按鈕使用的樣式變化版本以 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 元件可協助您建立符合 Material Design 指南的美觀登入網頁，而且在所有裝置上都能保持一致的外觀和行為。

後續步驟

文字欄位、按鈕和分享關係圖是 MDC 網路程式庫的三個核心元件，還有更多！您也可以探索 MDC Web 中的其他元件。

請參閱「MDC-102：Material Design 結構和版面配置」，瞭解導覽匣和圖片清單。感謝您試用 Material Design 元件。希望您喜歡本程式碼研究室！

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

非常同意

同意

普通

不同意

非常不同意

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

非常同意

同意

普通

不同意

非常不同意

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

1. 簡介

什麼是網頁版的 Material Design 和 Material Design 元件？

建構項目

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

軟硬體需求

我們一直在努力改善我們的教學課程。針對網站開發的經驗程度，你會給予什麼評價？

2. 設定開發環境

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

...或是從 GitHub 複製檔案

安裝專案依附元件

執行範例應用程式

查看程式碼

「index.html」的中繼資料

login.scss 中的自訂樣式

3. 新增文字欄位

安裝 MDC 文字欄位

新增 HTML

新增 CSS

新增 JavaScript

新增 HTML5 驗證

4. 新增按鈕

安裝 MDC 按鈕

新增 HTML

新增 CSS

在按鈕中加入墨水漣漪特效

5. 回顧

後續步驟

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

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

「`index.html`」的中繼資料

`login.scss` 中的自訂樣式