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

MDC-111 เว็บ:
การรวมคอมโพเนนต์ Material ไว้ในโค้ดเบส (เว็บ)

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ ต.ค. 11, 2020
account_circleเขียนโดย Liz Mitchell, Abhinay Omkar

1 บทนำ

logo_components_color_2x_web_96dp.png

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

c33f9d1388feca74.png

คอมโพเนนต์เว็บของ 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

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

bb3a822c020c9287.png

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

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

npm start

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

aa9263b15ae4f8d8.png

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

8f60906e660b695e.png

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

โหลดหน้านี้ซ้ำ คุณจะเห็นข้อมูลดังนี้

9be8eb813b02eada.gif

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

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

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

20fa4104564f8195.gif

คอมโพเนนต์ 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);
});

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

c33f9d1388feca74.png

ช่องข้อความทั้งหมดได้รับการอัปเดตให้ใช้ธีม Material แล้ว

6 สรุป

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

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

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

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

หากสนใจใช้ MDC Web กับเฟรมเวิร์กที่เฉพาะเจาะจง ให้ไปที่ MDC-112: การผสานรวม MDC กับ Web Frameworks

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

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