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

1. 簡介

logo_components_color_2x_web_96dp.png

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

網頁適用的 Material Design 元件 (MDC 網頁) 是跨架構使用，並使用一般 JavaScript 建立。這有助於 MDC Web 與開發程序順暢運作。您可以視需要安裝這些元件，改善現有應用程式的設計。

建構項目

在本程式碼研究室中，您將以 MDC 網頁提供的元件，取代部分現有元件：

c33f9d1388feca74.png

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

  • 按鈕
  • 選取
  • 文字欄位

軟硬體需求

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

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

bb3a822c020c9287.png

執行範例應用程式

在 Starter 目錄中執行以下指令：

npm start

webpack-dev-server 將會啟動。將瀏覽器指向 http://localhost:8080/，即可查看該網頁。

aa9263b15ae4f8d8.png

大功告成！你應該會看到應用程式的運送地址表單：

8f60906e660b695e.png

3. 更新按鈕

安裝 MDC 按鈕

按下 Ctrl+C 終止開發伺服器。然後安裝 MDC 按鈕 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>

加入漣漪效果

您可以不使用 JavaScript 使用 MDC 按鈕。不過，在按鈕中加入互動式分享關係圖，可以提供更豐富的使用者體驗。

按下 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">

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

9be8eb813b02eada.gif

按下按鈕時，按鈕現在會顯示細微的波紋效果，提供視覺回饋。

4. 更新選取元素

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'));

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

20fa4104564f8195.gif

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);
});

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

c33f9d1388feca74.png

文字欄位現已更新為使用 Material Design 主題設定。

6. 重點回顧

您已取代一些常見的元件 (文字欄位、選取和按鈕)，而無須重新設計應用程式。做得好！

其他也有顯著差異的元件包括頂端應用程式列和導覽匣。

後續步驟

如要探索 MDC Web 中的更多元件，請前往 MDC Web 目錄。

如果您想在特定架構中使用 MDC Web，請參閱 MDC-112：將 MDC 與網路架構整合。

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

非常同意 同意 普通 不同意 非常不同意

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

非常同意 同意 無意見 不同意 非常不同意