หน้านี้ได้รับการแปลโดย Cloud Translation API

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

1. บทนำ

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

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

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

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

คอมโพเนนต์เว็บของ MMDC ใน Codelab นี้

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

สิ่งที่ต้องมี

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

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

ผู้ฝึกหัด

ระดับกลาง

ผู้ชำนาญ

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

ดาวน์โหลดแอป Codelab เริ่มต้น

แอปเริ่มต้นอยู่ในไดเรกทอรี 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

ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์

จากไดเรกทอรีเริ่มต้น (material-components-web-codelabs/mdc-111/starter) ให้เรียกใช้คำสั่งต่อไปนี้

npm install

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

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

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

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

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

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

npm start

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

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

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

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

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

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

หากต้องการสร้างอินสแตนซ์ของภาพกระเพื่อมบนปุ่ม ให้เพิ่มรายการต่อไปนี้ที่ด้านล่างของ 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. อัปเดตองค์ประกอบที่เลือก

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

ติดตั้งโมดูลโหนด MDC

กด 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>

ใต้แท็ก </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';

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

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

โหลดหน้าเว็บซ้ำ ซึ่งตอนนี้ควรมีลักษณะดังนี้

คอมโพเนนต์ MDC Select จะแสดงรายการตัวเลือกแก่ผู้ใช้ในรูปแบบที่คุ้นเคย แต่มีสไตล์ทันสมัย

5. อัปเดตช่องข้อความ

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

ติดตั้งโมดูลโหนด MDC

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

npm install @material/textfield
npm start

เพิ่ม CSS

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

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

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

ใน index.html ให้ค้นหาองค์ประกอบ <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>

ตอนนี้คุณสามารถนำรูปแบบ .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 กับ Web Frameworks

ฉันทำ Codelab นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

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

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

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

ฉันต้องการใช้ Material Components ต่อไปในอนาคต

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

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

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