MDC-111 網頁：將 Material 元件整合至程式碼集 (網頁)

1. 簡介

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

網頁專用的 Material 元件 (MDC Web) 與架構無關，是使用一般 JavaScript 建構而成。這有助於 MDC Web 與您的開發程序順暢運作。您可以視需要安裝這些元件，在現有應用程式中進行敏捷設計改良。

建構項目

在本程式碼研究室中，您將表單中的部分現有元件，替換為 MDC Web 提供的元件：

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

按鈕
選取
文字欄位

軟硬體需求

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

您對網頁開發的經驗程度為何？

新手

中級

熟練

2. 設定開發環境

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

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

...或從 GitHub 複製

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

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

安裝專案依附元件

從入門目錄 (material-components-web-codelabs/mdc-111/starter) 執行：

npm install

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

執行範例應用程式

在入門目錄中執行：

npm start

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

太棒了，您應該會看到應用程式的運送地址表單：

3. 更新按鈕

安裝 MDC 按鈕

按下 Ctrl+C 鍵，終止開發伺服器。接著，安裝 MDC Button NPM 套件，然後重新啟動伺服器：

npm install @material/button
npm start

匯入 CSS

在 _theme.scss 頂端刪除 .crane-button { ... } 區塊，並在該處新增下列內容：

$mdc-theme-primary: $crane-primary-color;

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

更新標記

在 index.html 中，從 <button> 元素移除 crane-button 類別，新增 mdc-button 和 mdc-button--raised 類別，並在具有 mdc-button__label 類別的 <span> 元素中巢狀內嵌標籤：

<button type="submit" class="mdc-button mdc-button--raised">
  <div class="mdc-button__ripple"></div>
  <span class="mdc-button__label">Save</span>
</button>

新增漣漪效果

MDC 按鈕不需 JavaScript 即可使用。不過，在按鈕中加入互動式漣漪效果，可提供更豐富的使用者體驗。

按下 Ctrl+C 鍵，終止開發伺服器。然後執行下列指令：

npm install @material/ripple
npm start

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

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

如要在按鈕上例項化漣漪效果，請在 app.js 底部新增下列內容：

new MDCRipple(document.querySelector('.mdc-button'));

匯入 Roboto 字型

根據預設，Material Design 會使用 Roboto 做為元件字體。

在 index.html 中，將下列內容新增至 <head> 元素，匯入 Roboto 網頁字型：

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">

重新載入頁面，畫面應如下所示：

按下按鈕時，現在會顯示細微的漣漪效果，做為視覺回饋。

4. 更新 select 元素

MDC Select 元件會包裝原生 HTML <select> 元素。只要平常會使用 <select>，讓我們更新「State」(州) 欄位。

安裝 MDC Node 模組

按下 Ctrl+C 鍵，終止開發伺服器。然後執行下列指令：

npm install @material/select
npm start

匯入 CSS

在按鈕匯入項目後方，將下列內容新增至 _theme.scss：

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

更新標記

在 index.html 中找出 <select> 元素。將 crane-input 類別替換為 mdc-select__native-control：

<select class="mdc-select__native-control" id="crane-state-input" required>

在 <select> 標記的正上方，為 MDC Select 元件的下拉式箭頭新增下列標記：

<i class="mdc-select__dropdown-icon"></i>

在結尾 </select> 標記的正下方，將 crane-label 類別替換為 mdc-floating-label：

<label class="mdc-floating-label" for="crane-state-input">

然後在標籤後方立即新增下列標記：

<div class="mdc-line-ripple"></div>

最後，在 <select> 元素周圍 (但位於 crane-field 元素內) 新增下列標記：

<div class="mdc-select">
  ...
</div>

產生的標記應如下所示：

<div class="crane-field">
  <div class="mdc-select">
    <i class="mdc-select__dropdown-icon"></i>
    <select class="mdc-select__native-control" id="crane-state-input" required>
      <option value="" selected></option>
      <option value="AL">Alabama</option>
      ...
      <option value="WI">Wisconsin</option>
      <option value="WY">Wyoming</option>
    </select>
    <label class="mdc-floating-label" for="crane-state-input">
      State
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

匯入 JS

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

import {MDCSelect} from '@material/select';

如要例項化選取器，請在 app.js 底部新增下列內容：

new MDCSelect(document.querySelector('.mdc-select'));

重新載入頁面，現在應該會看到如下畫面：

MDC Select 元件會以使用者熟悉的格式呈現選項清單，但採用現代化樣式。

5. 更新文字欄位

相較於純 <input> 元素，Material Design 文字欄位在可用性方面有大幅提升。這些元素設計簡單，方便使用者在複雜內容中辨識，並在使用者與其互動時顯示細微的視覺回饋。

安裝 MDC Node 模組

按下 Ctrl+C 鍵，終止開發伺服器。然後執行下列指令：

npm install @material/textfield
npm start

新增 CSS

在選取匯入項目後，將下列項目新增至 _theme.scss：

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

更新標記

在 index.html 中，找出「Name」欄位的 <input> 元素。將 crane-input 類別替換為 mdc-text-field__input：

<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>

接著，將 crane-label 類別替換為 mdc-floating-label：

<label class="mdc-floating-label" for="crane-name-input">

然後在標籤後方立即新增下列標記：

<div class="mdc-line-ripple"></div>

最後，使用下列項目包裝所有 3 個元素：

<div class="mdc-text-field">
  ...
</div>

產生的標記應如下所示：

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-name-input"
           type="text" required autofocus>
    <label class="mdc-floating-label" for="crane-name-input">
      Name
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

針對網頁上的所有其他 <input> 元素重複執行相同程序。

「地址」、「城市」和「郵遞區號」欄位的標記應如下所示：

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-address-input" type="text" required>
    <label class="mdc-floating-label" for="crane-address-input">
      Address
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-city-input" type="text" required>
    <label class="mdc-floating-label" for="crane-city-input">
      City
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

<div class="crane-field">
  <div class="mdc-text-field">
    <input class="mdc-text-field__input" id="crane-zip-code-input"
            type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
    <label class="mdc-floating-label" for="crane-zip-code-input">
      ZIP Code
    </label>
    <div class="mdc-line-ripple"></div>
  </div>
</div>

您現在可以從 _theme.scss 移除不再使用的 .crane-label 和 .crane-input 樣式。

匯入 JS

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

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

如要例項化文字欄位，請在 app.js 底部新增下列內容：

const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
  new MDCTextField(textFieldEl);
});

重新載入頁面，現在應該會看到如下畫面：

現在所有文字欄位都已更新，使用 Material Design 主題設定。

6. 重點回顧

您已替換一些常見的元件 (文字欄位、選取器和按鈕)，但並未徹底重新設計應用程式。做得好！

頂端應用程式列和導覽匣等其他元件，也能帶來顯著差異。

後續步驟

如要進一步瞭解 MDC Web 中的元件，請前往 MDC Web 目錄。

如要搭配特定架構使用 MDC Web，請參閱 MDC-112：將 MDC 與網頁架構整合。

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

非常同意

同意

沒意見

不同意

非常不同意

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

非常同意

同意

沒意見

不同意

非常不同意

MDC-111 網頁：將 Material 元件整合至程式碼集 (網頁) 透過集合功能整理內容 你可以依據偏好儲存及分類內容。

1. 簡介

建構項目

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

軟硬體需求

您對網頁開發的經驗程度為何？

2. 設定開發環境

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

...或從 GitHub 複製

安裝專案依附元件

執行範例應用程式

3. 更新按鈕

安裝 MDC 按鈕

匯入 CSS

更新標記

新增漣漪效果

匯入 Roboto 字型

4. 更新 select 元素

安裝 MDC Node 模組

匯入 CSS

更新標記

匯入 JS

5. 更新文字欄位

安裝 MDC Node 模組

新增 CSS

更新標記

匯入 JS

6. 重點回顧

後續步驟

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

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

MDC-111 網頁：將 Material 元件整合至程式碼集 (網頁)