เกี่ยวกับ Codelab นี้
1 บทนำ
Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ 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
หากต้องการโคลน Codelab นี้จาก 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 เพื่อปิดเซิร์ฟเวอร์การพัฒนา จากนั้น ติดตั้งปุ่ม 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 ให้นำคลาส 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';
หากต้องการสร้างอินสแตนซ์รายการที่เลือก ให้เพิ่มคำสั่งต่อไปนี้ไว้ที่ด้านล่างของ app.js:
new MDCSelect(document.querySelector('.mdc-select'));
โหลดหน้าเว็บซ้ำ ซึ่งตอนนี้ควรมีลักษณะดังนี้:
คอมโพเนนต์ MDC Select จะแสดงรายการตัวเลือกสําหรับผู้ใช้ในรูปแบบที่คุ้นเคย แต่มีการจัดรูปแบบที่ทันสมัย
5 อัปเดตช่องข้อความ
ช่องข้อความของดีไซน์ Material มีความสามารถในการใช้งานมากกว่าองค์ประกอบ <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
หากสนใจใช้ MDC Web กับเฟรมเวิร์กที่เฉพาะเจาะจง ให้ไปที่ MDC-112: การผสานรวม MDC กับ Web Frameworks