เว็บ MDC-111: การรวมคอมโพเนนต์เนื้อหาเข้ากับฐานของโค้ด (เว็บ)

1. บทนำ

Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้งาน Material Design ได้ MDC สร้างขึ้นโดยทีมวิศวกรและนักออกแบบ UX ของ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบรายการ และพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop

Material Components for the web (MDC Web) เป็นเฟรมเวิร์กที่ไม่ขึ้นกับแพลตฟอร์มใดๆ ซึ่งสร้างขึ้นโดยใช้ JavaScript ปกติ ซึ่งจะช่วยให้ MDC Web ทำงานร่วมกับกระบวนการพัฒนาของคุณได้อย่างราบรื่น คุณติดตั้งคอมโพเนนต์เหล่านี้ได้ตามต้องการเพื่อช่วยปรับปรุงการออกแบบแอปที่มีอยู่ให้คล่องตัว

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้แทนที่คอมโพเนนต์ที่มีอยู่บางส่วนในแบบฟอร์มด้วยคอมโพเนนต์ที่ MDC Web มีให้

คอมโพเนนต์ MDC Web ใน Codelab นี้

ปุ่ม
เลือก
ช่องข้อความ

สิ่งที่คุณต้องมี

Node.js เวอร์ชันล่าสุด (มาพร้อมกับ npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ JavaScript)
โค้ดตัวอย่าง (ดาวน์โหลดได้ในขั้นตอนถัดไป)
ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript

คุณจะให้คะแนนระดับประสบการณ์ในการพัฒนาเว็บเท่าใด

ผู้ฝึกหัด

ขั้นกลาง

ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

ดาวน์โหลดแอป Codelab สำหรับผู้เริ่มต้น

แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-111/starter อย่าลืม cd ไปยังไดเรกทอรีนั้นก่อนเริ่มต้น

...หรือโคลนจาก GitHub

หากต้องการโคลน Codelab นี้จาก 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

คุณจะเห็นกิจกรรมมากมาย และในตอนท้าย เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ

MDC Web ใช้ตัวประมวลผล CSS ล่วงหน้าชื่อ Sass หากคุณใช้ตัวประมวลผล CSS ล่วงหน้าอื่น (หรือไม่ใช้เลย) ก็ไม่เป็นไร คุณสามารถใช้ Sass ควบคู่ไปกับตัวประมวลผลล่วงหน้าปัจจุบันได้โดยติดตั้ง sassCLI หรือใช้ปลั๊กอิน (เช่น sass-loader สำหรับ Webpack, gulp-sass สำหรับ Gulp หรือ grunt-sass สำหรับ Grunt) ใน Toolchain การสร้าง

เพื่อให้โค้ดของเราทำงานในเบราว์เซอร์รุ่นเก่าอย่าง IE 11 ได้ เราจึงใช้ Transpiler ที่ชื่อ Babel เพื่อทำการ Transpile ไวยากรณ์ JavaScript ES2015 ของ MDC Web เป็นไวยากรณ์ JavaScript ES5

เราจะใช้ webpack เพื่อจัดกลุ่มไฟล์และแสดงเว็บไซต์ในเครื่อง ระบบได้ตั้งค่าการกำหนดค่า webpack สำหรับโปรเจ็กต์นี้ไว้ให้คุณแล้วในไฟล์ webpack.config.js โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีกำหนดค่าได้ที่คู่มือการเริ่มต้นใช้งาน

เรียกใช้แอปเริ่มต้น

ในไดเรกทอรีเริ่มต้น ให้เรียกใช้คำสั่งต่อไปนี้

npm start

webpack-dev-server จะเริ่มขึ้น ชี้เบราว์เซอร์ไปที่ http://localhost:8080/ เพื่อดูหน้าเว็บ

สำเร็จ! คุณควรเห็นแบบฟอร์มที่อยู่สำหรับจัดส่งของแอป

3. อัปเดตปุ่ม

ติดตั้งปุ่ม MDC

กด Ctrl+C เพื่อปิดเซิร์ฟเวอร์การพัฒนา จากนั้นติดตั้ง NPM package ของปุ่ม MDC แล้วรีสตาร์ทเซิร์ฟเวอร์

npm install @material/button
npm start

นำเข้า CSS

ที่ด้านบนของ _theme.scss ให้ลบบล็อก .crane-button { ... } แล้วเพิ่มรายการต่อไปนี้แทน

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

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

อัปเดตมาร์กอัป

ใน index.html ให้นำคลาส crane-button ออกจากองค์ประกอบ <button> เพิ่มคลาส mdc-button และ mdc-button--raised แล้วซ้อนป้ายกำกับภายในองค์ประกอบ <span> ที่มีคลาส mdc-button__label

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

หากต้องการสร้างอินสแตนซ์ของ Ripple บนปุ่ม ให้เพิ่มโค้ดต่อไปนี้ที่ด้านล่างของ app.js

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

นำเข้าแบบอักษร Roboto

โดยค่าเริ่มต้น Material Design จะใช้ Roboto สำหรับแบบอักษรของคอมโพเนนต์

ใน index.html ให้นำเข้าแบบอักษร Roboto Web โดยเพิ่มข้อความต่อไปนี้ลงในองค์ประกอบ <head>

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

โหลดหน้าเว็บซ้ำ แล้วคุณจะเห็นข้อความคล้ายกับข้อความต่อไปนี้

ตอนนี้ปุ่มจะแสดงเอฟเฟกต์ระลอกคลื่นเล็กๆ เป็นความคิดเห็นด้วยภาพเมื่อกด

4. อัปเดตองค์ประกอบ Select

คอมโพเนนต์ MDC Select จะรวมองค์ประกอบ <select> ของ HTML ดั้งเดิม ใช้ได้ทุกที่ที่คุณใช้ <select> ตามปกติ มาอัปเดตฟิลด์"รัฐ"กัน

ติดตั้งโมดูล MDC Node

กด Ctrl+C เพื่อปิดเซิร์ฟเวอร์การพัฒนา จากนั้นเรียกใช้

npm install @material/select
npm start

นำเข้า CSS

เพิ่มข้อมูลต่อไปนี้ลงใน _theme.scss หลังการนำเข้าปุ่ม

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

อัปเดตมาร์กอัป

ค้นหาองค์ประกอบ <select> ใน index.html แทนที่คลาส 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>

แทนที่คลาส crane-label ด้วย mdc-floating-label ที่อยู่ใต้แท็กปิด </select>

<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. อัปเดตช่องข้อความ

ช่องข้อความ Material Design มีความสามารถในการใช้งานที่เหนือกว่าองค์ประกอบ <input> แบบธรรมดาอย่างมาก โดยออกแบบมาให้ระบุได้ง่ายภายในเนื้อหาที่ซับซ้อน และแสดงผลภาพที่ละเอียดอ่อนเมื่อผู้ใช้โต้ตอบกับองค์ประกอบเหล่านั้น

ติดตั้งโมดูล MDC Node

กด Ctrl+C เพื่อปิดเซิร์ฟเวอร์การพัฒนา จากนั้นเรียกใช้

npm install @material/textfield
npm start

เพิ่ม CSS

เพิ่มข้อมูลต่อไปนี้ลงใน _theme.scss หลังการนำเข้าที่เลือก

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

อัปเดตมาร์กอัป

ใน index.html ให้ค้นหาองค์ประกอบ <input> สำหรับฟิลด์ "Name" แทนที่คลาส 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>

ตอนนี้คุณสามารถนำรูปแบบ .crane-label และ .crane-input ออกจาก _theme.scss ซึ่งไม่ได้ใช้แล้วได้

นำเข้า 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 แล้ว

6. สรุป

คุณได้แทนที่คอมโพเนนต์ทั่วไปบางอย่าง (ช่องข้อความ ตัวเลือก และปุ่ม) โดยไม่ต้องออกแบบแอปใหม่ทั้งหมด ยอดเยี่ยมมาก!

คอมโพเนนต์อื่นๆ ที่สร้างความแตกต่างได้อย่างมาก ได้แก่ แถบแอปด้านบนและลิ้นชักการนำทาง

ขั้นตอนถัดไป

คุณสามารถสำรวจคอมโพเนนต์เพิ่มเติมใน MDC Web ได้โดยไปที่แคตตาล็อก MDC Web

หากสนใจใช้ MDC Web กับเฟรมเวิร์กใดเฟรมเวิร์กหนึ่ง โปรดไปที่ MDC-112: การผสานรวม MDC กับเฟรมเวิร์กบนเว็บ

ฉันทำ Codelab นี้เสร็จได้โดยใช้เวลาและความพยายามที่สมเหตุสมผล

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เป็นกลาง

ไม่เห็นด้วย

ไม่เห็นด้วยอย่างยิ่ง

ฉันต้องการใช้คอมโพเนนต์ Material ต่อไปในอนาคต

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

ไม่เห็นด้วยอย่างยิ่ง