1. บทนำ
Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop |
ใน Codelab MDC-101 คุณใช้ Material Components (MDC) 2 รายการเพื่อสร้าง UI ของหน้าเข้าสู่ระบบ ซึ่งได้แก่ ช่องข้อความและปุ่ม ทีนี้เรามาลองเพิ่มการนำทาง โครงสร้าง และข้อมูลกันดีกว่า
สิ่งที่คุณจะสร้าง
ใน Codelab นี้ คุณจะได้สร้างหน้าแรกสำหรับแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะประกอบด้วยข้อมูลต่อไปนี้
- ลิ้นชักการนำทาง
- รายการรูปภาพที่เต็มไปด้วยผลิตภัณฑ์
คอมโพเนนต์เว็บของ MMDC ใน 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 และรายการ
หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ลิ้นชัก ให้เรียกใช้คำสั่งต่อไปนี้
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 ภายในลิ้นชักการนำทางเพื่อการนำทางด้วยแป้นพิมพ์ที่เหมาะสม เปิด 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 อีก 2 รายการจากไลบรารีเว็บ MDC แล้ว คุณสำรวจคอมโพเนนต์เพิ่มเติมได้โดยไปที่ MDC Web Catalog
แม้ว่าจะทำงานได้อย่างสมบูรณ์ แต่หน้าแรกก็ยังไม่ได้แสดงแบรนด์หรือมุมมองที่เฉพาะเจาะจงใดๆ ใน MDC-103: Material Design Theming with Color, Shape, Elevation และ Type คุณจะได้ปรับแต่งสไตล์ขององค์ประกอบเหล่านี้เพื่อแสดงออกถึงแบรนด์ที่มีชีวิตชีวาและทันสมัย