Material Components (MDC) ช่วยให้นักพัฒนาแอปใช้งาน Material Design ได้ MDC สร้างขึ้นโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบรายการ และพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter material.io/develop |
ใน Codelab MDC-101 คุณใช้คอมโพเนนต์ Material (MDC) 2 รายการเพื่อสร้าง UI หน้าเข้าสู่ระบบ ได้แก่ ช่องข้อความและปุ่ม ตอนนี้มาขยายความโดยการเพิ่มการนำทาง โครงสร้าง และข้อมูลกัน
สิ่งที่คุณจะสร้าง
ในโค้ดแล็บนี้ คุณจะได้สร้างหน้าแรกของแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน ซึ่งประกอบด้วย
- ลิ้นชักการนำทาง
- รายการรูปภาพที่มีผลิตภัณฑ์เต็มไปหมด
คอมโพเนนต์ MDC Web ใน Codelab นี้
- ลิ้นชัก
- รายการรูปภาพ
สิ่งที่ต้องมี
- Node.js เวอร์ชันล่าสุด (มาพร้อมกับ npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ JavaScript)
- โค้ดตัวอย่าง (ดาวน์โหลดได้ในขั้นตอนถัดไป)
- ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript
คุณจะให้คะแนนระดับประสบการณ์ในการพัฒนาเว็บเท่าใด
หากเคยเรียน MDC-101 มาแล้ว
หากคุณทำ MDC-101 เสร็จแล้ว คุณควรเตรียมโค้ดสำหรับโค้ดแล็บนี้ ข้ามไปยังขั้นตอนที่ 3: เพิ่มแถบนำทาง
ดาวน์โหลดแอป Codelab สำหรับผู้เริ่มต้น
แอปเริ่มต้นอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-102/starter อย่าลืม cd เข้าไปในไดเรกทอรีนั้นก่อนเริ่มต้น
...หรือโคลนจาก GitHub
หากต้องการโคลนโค้ดแล็บนี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-102/starter
ติดตั้งการอ้างอิงของโปรเจ็กต์
ไดเรกทอรีปัจจุบันควรเป็น material-components-web-codelabs/mdc-102/starter. จากนั้นให้เรียกใช้คำสั่งต่อไปนี้
npm install
หลังจากมีกิจกรรมจำนวนมาก เครื่องชำระเงินควรแสดงการติดตั้งที่สำเร็จดังนี้
เรียกใช้แอปเริ่มต้น
ในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้
npm start
webpack-dev-server จะเริ่มขึ้น ป้อน http://localhost:8080/ ในเบราว์เซอร์เพื่อดูหน้าเว็บ
สำเร็จ! คุณควรเห็นหน้าเข้าสู่ระบบ Shrine จาก Codelab MDC-101
ตอนนี้หน้าเข้าสู่ระบบดูดีแล้ว มาป้อนข้อมูลผลิตภัณฑ์บางอย่างลงในแอปกัน ป้อนชื่อผู้ใช้และรหัสผ่านที่ถูกต้อง จากนั้นคลิกปุ่ม "ถัดไป" เพื่อไปที่หน้าแรก
เมื่อผู้ใช้ลงชื่อเข้าใช้ ระบบจะแสดงหน้าแรกที่ระบุว่า "คุณทำสำเร็จแล้ว!" เยี่ยมเลย แต่ตอนนี้ผู้ใช้ต้องการการดำเนินการและทราบว่าตนเองอยู่ส่วนใดของแอป เราจึงมาเพิ่มการนำทางเพื่อช่วยในเรื่องนี้
รูปแบบการนำทางของ Material Design มีความสามารถในการใช้งานสูง ลิ้นชักการนำทางของ Material ช่วยให้คุณไปยังส่วนต่างๆ และเข้าถึงการดำเนินการอื่นๆ ได้อย่างรวดเร็ว มาเพิ่มกันเลย
ติดตั้งลิ้นชักและรายการ MDC
หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ลิ้นชัก ให้เรียกใช้คำสั่งต่อไปนี้
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 ตอนนี้หน้าแรกควรมีลักษณะดังนี้
ตอนนี้หน้าแรกมีลิ้นชักการนำทางแบบถาวรซึ่งแสดงรายการการนำทางต่างๆ โดยรายการแรกจะใช้งานอยู่
ตอนนี้แอปของเรามีโครงสร้างแล้ว มาจัดระเบียบเนื้อหาโดยวางไว้ในรายการรูปภาพกัน
ติดตั้งรายการรูปภาพ 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 รูปต่อแถว และรูปภาพจะปรับขนาดโดยอัตโนมัติให้พอดีกับพื้นที่หน้าจอที่มีอยู่
เว็บไซต์ของคุณมีขั้นตอนพื้นฐานที่นำผู้ใช้จากหน้าลงชื่อเข้าใช้ไปยังหน้าแรก ซึ่งผู้ใช้สามารถดูผลิตภัณฑ์ได้ คุณได้เพิ่มลิ้นชักและรายการรูปภาพเพื่อนำเสนอเนื้อหาด้วยโค้ดเพียงไม่กี่บรรทัด ตอนนี้หน้าแรกมีโครงสร้างและเนื้อหาพื้นฐานแล้ว
ขั้นตอนถัดไป
ตอนนี้คุณได้ใช้คอมโพเนนต์หลักของ Material Design อีก 2 รายการจากไลบรารี MDC Web แล้วด้วยลิ้นชักและรายการรูปภาพ คุณสำรวจคอมโพเนนต์เพิ่มเติมได้โดยไปที่แคตตาล็อกเว็บ MDC
แม้ว่าหน้าแรกจะทำงานได้อย่างเต็มที่ แต่ก็ยังไม่ได้แสดงถึงแบรนด์หรือมุมมองใดๆ โดยเฉพาะ ใน MDC-103: Material Design Theming with Color, Shape, Elevation and Type คุณจะปรับแต่งสไตล์ของคอมโพเนนต์เหล่านี้เพื่อแสดงแบรนด์ที่ทันสมัยและมีชีวิตชีวา