เกี่ยวกับ Codelab นี้
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
คุณจะเห็นกิจกรรมมากมาย และในตอนท้ายเทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ
เรียกใช้แอปเริ่มต้น
ในไดเรกทอรีเริ่มต้น ให้เรียกใช้คำสั่งต่อไปนี้
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