1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop |
ดีไซน์ Material และคอมโพเนนต์เนื้อหาสำหรับเว็บคืออะไร
Material Design คือระบบสำหรับการสร้างผลิตภัณฑ์ดิจิทัลที่โดดเด่นและสวยงาม โดยการรวมสไตล์ การสร้างแบรนด์ การโต้ตอบ และการเคลื่อนไหวเข้าด้วยกันภายใต้ชุดหลักการและองค์ประกอบที่สอดคล้องกัน ทำให้ทีมผลิตภัณฑ์ตระหนักถึงศักยภาพด้านการออกแบบที่ดีที่สุดของตนเอง
สำหรับเดสก์ท็อปและเว็บบนอุปกรณ์เคลื่อนที่ Material Components Web (MDC Web) จะรวมการออกแบบและวิศวกรรมเข้ากับไลบรารีคอมโพเนนต์เพื่อสร้างความสอดคล้องในแอปและเว็บไซต์ต่างๆ คอมโพเนนต์เว็บ MDC แต่ละอย่างจะอยู่ในโมดูลโหนดของตนเอง เมื่อระบบพัฒนาดีไซน์ Material จึงสามารถอัปเดตคอมโพเนนต์เหล่านี้ได้อย่างง่ายดายเพื่อดูแลให้การใช้งานสมบูรณ์แบบพิกเซลสอดคล้องกันและเป็นไปตามมาตรฐานการพัฒนาฟรอนท์เอนด์ของ Google MDC ยังพร้อมให้บริการใน Android, iOS และ Flutter ด้วย
ใน Codelab นี้ คุณจะได้สร้างหน้าเข้าสู่ระบบโดยใช้คอมโพเนนต์ต่างๆ ของ MDC Web
สิ่งที่คุณจะสร้าง
Codelab นี้เป็น Codelab แรกจาก 3 แห่งที่จะแนะนำคุณตลอดขั้นตอนการสร้างแอปชื่อ Shrine ซึ่งเป็นเว็บไซต์อีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะสาธิตวิธีปรับแต่งคอมโพเนนต์ให้สะท้อนถึงแบรนด์หรือสไตล์โดยใช้ MDC Web
ใน Codelab นี้ คุณจะสร้างหน้าเข้าสู่ระบบสำหรับ Shrine ที่มี:
- ช่องข้อความ 2 ช่อง ช่องหนึ่งสำหรับป้อนชื่อผู้ใช้และอีกช่องสำหรับป้อนรหัสผ่าน
- 2 ปุ่ม ปุ่มหนึ่งสำหรับ "ยกเลิก" และอีกอันสำหรับ "ถัดไป"
- ชื่อเว็บไซต์ (ศาลเจ้า)
- รูปภาพโลโก้ของศาลเจ้า
คอมโพเนนต์เว็บของ MMDC ใน Codelab นี้
- ช่องข้อความ
- ปุ่ม
- คลื่น
สิ่งที่คุณต้องมี
- Node.js เวอร์ชันล่าสุด (ซึ่งมาพร้อมกับ npm ซึ่งเป็นตัวจัดการแพ็กเกจ JavaScript)
- โค้ดตัวอย่าง (จะดาวน์โหลดในขั้นตอนถัดไป)
- ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
เราค้นหาวิธีปรับปรุงบทแนะนำของเราอยู่เสมอ คุณจะให้คะแนนประสบการณ์ด้านการพัฒนาเว็บของคุณในระดับใด
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
ดาวน์โหลดแอป Codelab เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-101/starter อย่าลืม cd ในไดเรกทอรีดังกล่าวก่อนเริ่มต้น
...หรือโคลนโมเดลจาก GitHub
หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-101/starter
ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์
จากไดเรกทอรีเริ่มต้น ให้เรียกใช้คำสั่งต่อไปนี้
npm install
คุณจะเห็นกิจกรรมจำนวนมาก และในตอนท้าย เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ
หากไม่ ให้เรียกใช้ npm audit fix
เรียกใช้แอปเริ่มต้น
โดยให้เรียกใช้สิ่งต่อไปนี้ในไดเรกทอรีเดียวกัน
npm start
webpack-dev-server จะเริ่มต้น เปิดเบราว์เซอร์และไปที่ http://localhost:8080/ เพื่อดูหน้าเว็บ
สำเร็จ! รหัสเริ่มต้นสำหรับหน้าเข้าสู่ระบบของ Shrine ควรทำงานในเบราว์เซอร์ คุณจะเห็นชื่อ "ศาลเจ้า" และโลโก้ Shrine อยู่ด้านล่าง
ดูโค้ด
ข้อมูลเมตาใน index.html
ในไดเรกทอรีเริ่มต้น ให้เปิด index.html ด้วยตัวแก้ไขโค้ดที่คุณชอบ ควรประกอบด้วย:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Shrine (MDC Web Example App)</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
<link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">
<link rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
<section class="header">
<svg class="shrine-logo" ...>
...
</svg>
<h1>SHRINE</h1>
</section>
<form action="home.html">
</form>
<script src="bundle-login.js" async></script>
</body>
</html>
ที่นี่จะใช้แท็ก <link> เพื่อโหลดไฟล์ bundle-login.css ที่ Webpack สร้างขึ้น และแท็ก <script> จะมีไฟล์ bundle-login.js อยู่ด้วย นอกจากนี้ เราได้รวม normalize.css เพื่อการแสดงผลข้ามเบราว์เซอร์ที่สอดคล้องกัน รวมถึงแบบอักษร Roboto จาก Google Fonts
รูปแบบที่กำหนดเองใน login.scss
คอมโพเนนต์เว็บ MDC ได้รับการจัดรูปแบบโดยใช้คลาส CSS mdc-* เช่น คลาส mdc-text-field (MDC Web ถือว่าโครงสร้าง DOM เป็นส่วนหนึ่งของ API สาธารณะ)
โดยทั่วไปแล้ว เราขอแนะนำให้คุณทำการแก้ไขรูปแบบที่กำหนดเองกับคอมโพเนนต์โดยใช้คลาสของคุณเอง คุณอาจสังเกตเห็นคลาส CSS ที่กำหนดเองใน HTML ด้านบนบางคลาส เช่น shrine-logo สไตล์เหล่านี้กำหนดไว้ใน login.scss เพื่อเพิ่มสไตล์พื้นฐานให้กับหน้าเว็บ
เปิด login.scss และคุณจะเห็นรูปแบบต่อไปนี้สำหรับหน้าเข้าสู่ระบบ
@import "./common";
.header {
text-align: center;
}
.shrine-logo {
width: 150px;
height: 150px;
padding-top: 80px;
fill: currentColor;
}
เมื่อคุณคุ้นเคยกับโค้ดเริ่มต้นแล้ว เรามาติดตั้งใช้งานคอมโพเนนต์แรกกันบ้าง
3. เพิ่มช่องข้อความ
ในการเริ่มต้น เราจะเพิ่มฟิลด์ข้อความสองฟิลด์ในหน้าเข้าสู่ระบบของเรา ซึ่งผู้คนจะสามารถป้อนชื่อผู้ใช้และรหัสผ่านของตนได้ เราจะใช้คอมโพเนนต์ช่องข้อความ MDC ซึ่งมีฟังก์ชันการทำงานในตัวที่แสดงป้ายกำกับแบบลอยและเปิดใช้งานคลื่นสัมผัส
ติดตั้งช่องข้อความ MDC
คอมโพเนนต์เว็บ MDC จะเผยแพร่ผ่านแพ็กเกจ NPM หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ช่องข้อความ ให้เรียกใช้คำสั่งต่อไปนี้
npm install @material/textfield@^6.0.0
เพิ่ม HTML
ใน index.html ให้เพิ่มข้อมูลต่อไปนี้ภายในองค์ประกอบ <form> ในเนื้อความ
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
โครงสร้าง DOM ช่องข้อความ MDC ประกอบด้วยหลายส่วนดังนี้
- องค์ประกอบหลัก
mdc-text-field - องค์ประกอบย่อย
mdc-text-field__ripple,mdc-text-field__input,mdc-floating-labelและmdc-line-ripple
เพิ่ม CSS
ใน login.scss ให้เพิ่มคำสั่งการนำเข้าต่อไปนี้หลังการนำเข้าที่มีอยู่
@import "@material/textfield/mdc-text-field";
ในไฟล์เดียวกัน ให้เพิ่มรูปแบบต่อไปนี้เพื่อจัดแนวและจัดช่องข้อความให้อยู่ตรงกลาง
.username,
.password {
display: flex;
margin: 20px auto;
width: 300px;
}
เพิ่ม JavaScript
เปิด login.js ซึ่งตอนนี้ว่างเปล่า เพิ่มโค้ดต่อไปนี้เพื่อนำเข้าและสร้างอินสแตนซ์ช่องข้อความ
import {MDCTextField} from '@material/textfield';
const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));
เพิ่มการตรวจสอบ HTML5
ช่องข้อความจะแสดงหากข้อมูลที่ป้อนในช่องถูกต้องและมีข้อผิดพลาด โดยใช้แอตทริบิวต์ที่มาจาก API การตรวจสอบแบบฟอร์มของ HTML5
คุณควรทำดังนี้
- เพิ่มแอตทริบิวต์
requiredลงในองค์ประกอบmdc-text-field__inputของทั้งช่องข้อความ ชื่อผู้ใช้ และ รหัสผ่าน - ตั้งค่าแอตทริบิวต์
minlengthขององค์ประกอบmdc-text-field__inputของช่องข้อความรหัสผ่านเป็น"8"
ปรับองค์ประกอบ <label class="mdc-text-field mdc-text-field--filled"> 2 รายการให้มีลักษณะเช่นนี้
<label class="mdc-text-field mdc-text-field--filled username">
<span class="mdc-text-field__ripple"></span>
<input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
<span class="mdc-floating-label" id="username-label">Username</span>
<span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
<span class="mdc-text-field__ripple"></span>
<input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
<span class="mdc-floating-label" id="password-label">Password</span>
<span class="mdc-line-ripple"></span>
</label>
รีเฟรชหน้าเว็บที่ http://localhost:8080/ ตอนนี้คุณควรเห็นหน้าที่มีช่องข้อความ 2 ช่องสำหรับ "ชื่อผู้ใช้และรหัสผ่าน"
คลิกที่ช่องข้อความเพื่อดูภาพเคลื่อนไหวของป้ายกำกับแบบลอยและภาพเคลื่อนไหวแบบระลอกคลื่นของเส้น (เส้นขอบด้านล่างที่กระเพื่อมออก):
4. เพิ่มปุ่ม
ถัดไป เราจะเพิ่มปุ่มสองปุ่มในหน้าการเข้าสู่ระบบของเรา: "ยกเลิก" และ "ถัดไป" เราจะใช้คอมโพเนนต์ปุ่ม MDC ร่วมกับคอมโพเนนต์ระลอกคลื่น MDC เพื่อสร้างเอฟเฟ็กต์ระลอกคลื่นด้วยหมึกที่เป็นสัญลักษณ์ของดีไซน์ Material
ติดตั้งปุ่ม MDC
หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ปุ่ม ให้เรียกใช้คำสั่งต่อไปนี้
npm install @material/button@^6.0.0
เพิ่ม HTML
ใน index.html ให้เพิ่มค่าต่อไปนี้ใต้แท็กปิดขององค์ประกอบ <label class="mdc-text-field mdc-text-field--filled password">
<div class="button-container">
<button type="button" class="mdc-button cancel">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Cancel
</span>
</button>
<button class="mdc-button mdc-button--raised next">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">
Next
</span>
</button>
</div>
สำหรับขั้นตอน "ยกเลิก" เราจะใช้รูปแบบปุ่มเริ่มต้น อย่างไรก็ตาม "ถัดไป" ใช้ตัวแปรของรูปแบบ raified ซึ่งระบุโดยคลาส mdc-button--raised
เรารวมองค์ประกอบ mdc-button 2 อย่างไว้ในองค์ประกอบ <div> เพื่อให้จัดเรียงองค์ประกอบได้ง่ายขึ้นในภายหลัง
เพิ่ม CSS
ใน login.scss ให้เพิ่มคำสั่งการนำเข้าต่อไปนี้หลังการนำเข้าที่มีอยู่
@import "@material/button/mdc-button";
หากต้องการจัดเรียงปุ่มและเพิ่มขอบรอบๆ ให้เพิ่มรูปแบบต่อไปนี้ให้กับ login.scss:
.button-container {
display: flex;
justify-content: flex-end;
width: 300px;
margin: auto;
}
.button-container button {
margin: 3px;
}
เพิ่มระลอกคลื่นด้วยหมึกบนปุ่ม
เมื่อผู้ใช้แตะหรือคลิกปุ่ม ปุ่มควรจะแสดงฟีดแบ็กในรูปแบบระลอกคลื่น คอมโพเนนต์ระลอกคลื่นหมึกต้องใช้ JavaScript เราจึงจะเพิ่มองค์ประกอบดังกล่าวลงในหน้าเว็บ
หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ระลอกคลื่น ให้เรียกใช้คำสั่งต่อไปนี้
npm install @material/ripple@^6.0.0
ที่ด้านบนของ login.js ให้เพิ่มคำสั่งการนำเข้าต่อไปนี้
import {MDCRipple} from '@material/ripple';
ในการสร้าง Ripples ให้เพิ่มค่าต่อไปนี้ใน login.js
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));
เนื่องจากเราไม่ต้องเก็บการอ้างอิงไปยังอินสแตนซ์ระลอกคลื่น จึงไม่จำเป็นต้องกำหนดให้กับตัวแปร
เท่านี้ก็เรียบร้อย รีเฟรชหน้าเว็บ ระลอกคลื่นหมึกจะปรากฏขึ้นเมื่อคุณคลิกแต่ละปุ่ม
กรอกค่าที่ถูกต้องในช่องข้อความ และกด "ถัดไป" สำเร็จแล้ว! คุณจะดำเนินการต่อในหน้านี้ใน MDC-102
5. สรุป
การใช้มาร์กอัป HTML พื้นฐานและ CSS และ JavaScript เพียงไม่กี่บรรทัดทำให้ Material Components สำหรับไลบรารีเว็บช่วยให้คุณสร้างหน้าเข้าสู่ระบบที่สวยงามซึ่งสอดคล้องกับหลักเกณฑ์ของดีไซน์ Material รวมถึงมีรูปลักษณ์และการทำงานให้สอดคล้องกันในทุกอุปกรณ์
ขั้นตอนถัดไป
ช่องข้อความ ปุ่ม และระลอกคลื่นคือองค์ประกอบหลัก 3 อย่างในไลบรารีเว็บ MDC แต่ก็ยังมีอีกมาก นอกจากนี้ คุณยังสำรวจคอมโพเนนต์ที่เหลือใน MDC Web ได้ด้วย
คุณสามารถไปที่ MDC-102: โครงสร้างดีไซน์ Material และเลย์เอาต์เพื่อดูข้อมูลเกี่ยวกับลิ้นชักการนำทางและรายการรูปภาพ ขอขอบคุณที่ลองใช้ Material Components เราหวังว่าคุณจะชอบ Codelab นี้