1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้ Material Design ได้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop |
ใน Codelab MDC-101 คุณใช้ Material Components (MDC) 2 รายการเพื่อสร้าง UI ของหน้าเข้าสู่ระบบ ซึ่งได้แก่ ช่องข้อความและปุ่ม มาขยายความกันต่อด้วยการเพิ่มการนําทาง โครงสร้าง และข้อมูล
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะได้สร้างหน้าแรกสำหรับแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะประกอบด้วยข้อมูลต่อไปนี้
- ลิ้นชักการนำทาง
- รายการรูปภาพที่เต็มไปด้วยผลิตภัณฑ์
Web Components ของ MDC ใน Codelab นี้
- ลิ้นชัก
- รายการรูปภาพ
สิ่งที่ต้องมี
- Node.js เวอร์ชันล่าสุด (ซึ่งมาพร้อมกับ npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ JavaScript)
- โค้ดตัวอย่าง (ที่จะดาวน์โหลดในขั้นตอนถัดไป)
- ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
คุณจะให้คะแนนระดับประสบการณ์ด้านการพัฒนาเว็บเท่าใด
2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์
ต้องดำเนินการต่อจาก MDC-101 ใช่ไหม
หากคุณเรียน MDC-101 จบแล้ว โค้ดของคุณก็ควรพร้อมสําหรับ Codelab นี้แล้ว ข้ามไปยังขั้นตอนที่ 3: เพิ่มลิ้นชักการนำทาง
ดาวน์โหลดแอป Codelab เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-102/starter อย่าลืมcdเข้าไปในไดเรกทอรีนั้นก่อนเริ่มต้น
...หรือจะโคลนจาก GitHub ก็ได้
หากต้องการโคลน Codelab นี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
ติดตั้งทรัพยากร Dependency ของโปรเจ็กต์
ไดเรกทอรีปัจจุบันของคุณควรเป็น material-components-web-codelabs/mdc-102/starter. จากตรงนั้น ให้เรียกใช้คําสั่งต่อไปนี้
npm install
หลังจากกิจกรรมจำนวนมากปรากฏขึ้น เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ ดังนี้
เรียกใช้แอปเริ่มต้น
ในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งนี้
npm start
webpack-dev-server จะเริ่ม ไปที่ http://localhost:8080/ ในเบราว์เซอร์เพื่อดูหน้าเว็บ
สำเร็จ! คุณควรเห็นหน้าเข้าสู่ระบบของ Shrine จาก Codelab ของ MDC-101
เมื่อหน้าเข้าสู่ระบบดูดีแล้ว มาเพิ่มผลิตภัณฑ์ลงในแอปกัน ป้อนชื่อผู้ใช้และรหัสผ่านที่ถูกต้อง แล้วคลิกปุ่ม "ถัดไป" เพื่อไปยังหน้าแรก
3. เพิ่มลิ้นชักการนำทาง
เมื่อผู้ใช้ลงชื่อเข้าใช้ ระบบจะแสดงหน้าแรกที่ระบุว่า "คุณทำได้แล้ว" เยี่ยมเลย แต่ตอนนี้ผู้ใช้ต้องดำเนินการและทราบว่าตนเองอยู่ตรงไหนในแอป เรามาเพิ่มการนําทางเพื่อช่วยให้ผู้ใช้ดำเนินการดังกล่าวกัน
รูปแบบการนำทางของ Material Design ให้ความสามารถในการใช้งานระดับสูง ลิ้นชักการนำทางของเนื้อหาช่วยให้ไปยังส่วนต่างๆ ได้อย่างรวดเร็วและเข้าถึงการดำเนินการอื่นๆ ได้อย่างรวดเร็ว มาเพิ่มกัน
ติดตั้ง MDC Drawer และ List
หากต้องการติดตั้งแพ็กเกจสําหรับคอมโพเนนต์ลิ้นชัก ให้เรียกใช้คำสั่งต่อไปนี้
npm install @material/drawer @material/list
เพิ่ม HTML
ใน home.html ให้แทนที่ "คุณทำได้แล้ว" ด้วยมาร์กอัปต่อไปนี้สำหรับลิ้นชักและรายการในลิ้นชัก
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>
เพิ่ม CSS
ใน home.scss ให้เพิ่มคำสั่งการนำเข้าต่อไปนี้หลังการนำเข้าที่มีอยู่
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
เพิ่มรูปแบบต่อไปนี้ที่ด้านล่างของ home.scss
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
เพิ่ม JavaScript
เราต้องสร้างอินสแตนซ์ของ MDC List ภายในลิ้นชักการนำทางเพื่อให้ไปยังส่วนต่างๆ ด้วยแป้นพิมพ์ได้อย่างถูกต้อง เปิด home.js ซึ่งตอนนี้ว่างเปล่า แล้วเพิ่มโค้ดต่อไปนี้
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
รีเฟรชหน้าเว็บที่ http://localhost:8080/home.html ตอนนี้หน้าแรกควรมีลักษณะดังนี้
ตอนนี้หน้าแรกจะมีลิ้นชักการนำทางแบบถาวร ซึ่งจะแสดงรายการการนำทางต่างๆ โดยมีรายการแรกที่ใช้งานอยู่
4. เพิ่มรูปภาพที่มีป้ายกำกับข้อความ
ตอนนี้แอปมีโครงสร้างแล้ว ลองจัดระเบียบเนื้อหาโดยวางเนื้อหาไว้ในรายการรูปภาพ
ติดตั้งรายการรูปภาพ MDC
หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์รายการรูปภาพ ให้เรียกใช้คำสั่งต่อไปนี้
npm install @material/image-list
เพิ่ม HTML สำหรับลิสต์ที่มี 1 รายการ
เรามาเริ่มต้นด้วยการเพิ่มรายการรูปภาพถัดจากลิ้นชักการนำทางกัน เราจะเริ่มรายการด้วยการเพิ่มรายการเดียว ซึ่งประกอบด้วยรูปภาพและป้ายกำกับข้อความ
ใน home.html ให้เพิ่ม HTML ต่อไปนี้ต่อจากท้ายองค์ประกอบ <aside>
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>
รายการนี้มีคลาสเพิ่มเติมชื่อ product-list ซึ่งจะใช้รูปแบบที่กำหนดเอง ทั้งในบทแนะนำนี้และ MDC-103
เพิ่ม CSS
ก่อนอื่น ให้เพิ่มการนําเข้ารูปแบบคอมโพเนนต์รายการรูปภาพใน home.scss หลังการนําเข้าที่มีอยู่ ดังนี้
@import "@material/image-list/mdc-image-list";
ถัดไป ให้เพิ่มรูปแบบต่อไปนี้ต่อจากรูปแบบหน้าแรกเริ่มต้น
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
สไตล์เหล่านี้จะสั่งให้รายการรูปภาพแสดงรูปภาพใน 4 คอลัมน์ เพื่อให้รายการรูปภาพเลื่อนอิสระจากลิ้นชัก
รีเฟรชหน้าเว็บ ตอนนี้หน้าแรกควรมีลักษณะดังนี้:
รายการรูปภาพมีวัตถุประสงค์เพื่อแสดงรูปภาพจำนวนมากในคอลเล็กชัน ดังนั้นมาเพิ่มรูปภาพเพิ่มเติมเพื่อให้เห็นวิธีการทำงานของคอมโพเนนต์ได้ดียิ่งขึ้น
ใน home.html ให้คัดลอกองค์ประกอบ <li> ที่มีอยู่ ดังนี้
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
จากนั้นวางไว้หลังรายการที่มีอยู่ (ก่อนแท็กปิด </ul>) 15 ครั้ง ซึ่งจะทำให้มีรูปภาพทั้งหมด 16 รูป ไม่ต้องกังวลเรื่องรูปภาพและชื่อที่ไม่ซ้ำกัน คุณจะดำเนินการในส่วนนั้นใน MDC-103
รีเฟรช ตอนนี้หน้าแรกควรมีลักษณะดังนี้:
รายการรูปภาพจะแสดงภาพ 4 ภาพต่อแถว และปรับขนาดรูปภาพให้พอดีกับพื้นที่หน้าจอที่มีอยู่โดยอัตโนมัติ
5. สรุป
เว็บไซต์ของคุณมีขั้นตอนพื้นฐานที่นำผู้ใช้จากหน้าลงชื่อเข้าใช้ไปยังหน้าแรกที่ดูผลิตภัณฑ์ได้ คุณเพิ่มลิ้นชักและรายการรูปภาพเพื่อนำเสนอเนื้อหาได้ภายในเวลาไม่กี่นาที ตอนนี้หน้าแรกมีโครงสร้างและเนื้อหาพื้นฐานแล้ว
ขั้นตอนถัดไป
เมื่อใช้ลิ้นชักและรายการรูปภาพ แสดงว่าคุณได้ใช้คอมโพเนนต์หลักของ Material Design อีก 2 รายการจากไลบรารีเว็บ MDC แล้ว คุณสำรวจคอมโพเนนต์เพิ่มเติมได้โดยไปที่ MDC Web Catalog
แม้ว่าหน้าแรกจะใช้งานได้อย่างเต็มรูปแบบแล้ว แต่ยังไม่ได้แสดงแบรนด์หรือมุมมองใดๆ โดยเฉพาะ ใน MDC-103: ธีมการออกแบบ Material Design ด้วยสี รูปร่าง ระดับ และประเภท คุณจะปรับแต่งสไตล์ของคอมโพเนนต์เหล่านี้เพื่อแสดงแบรนด์ที่มีชีวิตชีวาและทันสมัย