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

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

เกี่ยวกับ Codelab นี้

subjectอัปเดตล่าสุดเมื่อ ต.ค. 11, 2020
account_circleเขียนโดย Liz Mitchell, Abhinay Omkar

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 นี้เสร็จได้ โดยใช้เวลาและลงแรงพอสมควร

ฉันต้องการใช้คอมโพเนนต์เนื้อหาต่อไปในอนาคต
bug_report รายงานความผิดพลาด