เว็บ MDC-102: โครงสร้างและเลย์เอาต์ของวัสดุ (เว็บ)

1. บทนำ

logo_components_color_2x_web_96dp.png

Material Components (MDC) ช่วยให้นักพัฒนานำดีไซน์ Material มาใช้ MDC สร้างโดยทีมวิศวกรและนักออกแบบ UX ที่ Google โดยมีคอมโพเนนต์ UI ที่สวยงามและใช้งานได้หลายสิบอย่างและพร้อมใช้งานสำหรับ Android, iOS, เว็บ และ Flutter.material.io/develop

ใน Codelab MDC-101 คุณใช้ Material Components (MDC) 2 รายการเพื่อสร้าง UI ของหน้าเข้าสู่ระบบ ซึ่งได้แก่ ช่องข้อความและปุ่ม ทีนี้เรามาลองเพิ่มการนำทาง โครงสร้าง และข้อมูลกันดีกว่า

สิ่งที่คุณจะสร้าง

ใน Codelab นี้ คุณจะได้สร้างหน้าแรกสำหรับแอปชื่อ Shrine ซึ่งเป็นแอปอีคอมเมิร์ซที่ขายเสื้อผ้าและของใช้ในบ้าน โดยจะประกอบด้วยข้อมูลต่อไปนี้

  • ลิ้นชักการนำทาง
  • รายการรูปภาพที่เต็มไปด้วยผลิตภัณฑ์

e2f359c254988d75.png

คอมโพเนนต์เว็บของ 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

หลังจากกิจกรรมจำนวนมากปรากฏขึ้น เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ ดังนี้

23003b0e5fdf9077.png

เรียกใช้แอปเริ่มต้น

ในไดเรกทอรีเดียวกัน ให้เรียกใช้คำสั่งต่อไปนี้

npm start

webpack-dev-server จะเริ่มต้น เปิดเบราว์เซอร์และไปที่ http://localhost:8080/ เพื่อดูหน้าเว็บ

4e04758051693865.png

สำเร็จ! คุณควรเห็นหน้าการเข้าสู่ระบบ Shrine จาก Codelab ของ MDC-101

6c206785707bee2e.png

เมื่อหน้าเข้าสู่ระบบดูดีแล้ว ลองเพิ่มข้อมูลผลิตภัณฑ์ให้กับแอป ป้อนชื่อผู้ใช้และรหัสผ่านที่ถูกต้อง แล้วคลิก "ถัดไป" เพื่อไปที่หน้าแรก

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 ตอนนี้หน้าแรกของคุณควรมีลักษณะดังนี้:

9c145acccbc28214.png

ตอนนี้หน้าแรกจะมีลิ้นชักการนำทางแบบถาวร ซึ่งแสดงรายการการนำทางต่างๆ โดยมีรายการแรกที่ใช้งานอยู่

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 คอลัมน์ เพื่อให้แน่ใจว่ารายการรูปภาพจะเลื่อนได้อย่างอิสระจากลิ้นชัก

รีเฟรชหน้าเว็บ ตอนนี้หน้าแรกควรมีลักษณะดังนี้:

5362b330204ffd58.png

รายการรูปภาพมีวัตถุประสงค์เพื่อแสดงรูปภาพจำนวนมากในคอลเล็กชัน ดังนั้นมาเพิ่มรูปภาพเพิ่มเติมเพื่อให้เห็นวิธีการทำงานของคอมโพเนนต์ได้ดียิ่งขึ้น

ใน 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

รีเฟรช ตอนนี้หน้าแรกควรมีลักษณะดังนี้:

e2f359c254988d75.png

รายการรูปภาพจะแสดงภาพ 4 ภาพต่อแถว และปรับขนาดรูปภาพให้พอดีกับพื้นที่หน้าจอที่มีอยู่โดยอัตโนมัติ

5. สรุป

เว็บไซต์ของคุณมีขั้นตอนพื้นฐานที่จะนำผู้ใช้จากหน้าลงชื่อเข้าใช้ไปยังหน้าแรกที่แสดงผลิตภัณฑ์ได้ เพียงใส่โค้ดเพียงไม่กี่บรรทัด คุณเพิ่มลิ้นชักและรายการรูปภาพเพื่อนำเสนอเนื้อหาได้ ตอนนี้หน้าแรกมีโครงสร้างพื้นฐานและเนื้อหาแล้ว

ขั้นตอนถัดไป

ด้วยลิ้นชักและรายการรูปภาพ ตอนนี้คุณได้ใช้องค์ประกอบหลักของดีไซน์ Material อีก 2 รายการจากไลบรารีเว็บ MDC แล้ว คุณสำรวจคอมโพเนนต์เพิ่มเติมได้โดยไปที่ MDC Web Catalog

แม้ว่าจะทำงานได้อย่างสมบูรณ์ แต่หน้าแรกก็ยังไม่ได้แสดงแบรนด์หรือมุมมองที่เฉพาะเจาะจงใดๆ ใน MDC-103: Material Design Theming with Color, Shape, Elevation และ Type คุณจะได้ปรับแต่งสไตล์ขององค์ประกอบเหล่านี้เพื่อแสดงออกถึงแบรนด์ที่มีชีวิตชีวาและทันสมัย

ฉันทำ Codelab นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

เห็นด้วยอย่างยิ่ง เห็นด้วย เฉยๆ ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง

ฉันต้องการใช้คอมโพเนนต์เนื้อหาต่อไปในอนาคต

เห็นด้วยอย่างยิ่ง เห็นด้วย เฉยๆ ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง