เว็บ MDC-101: ข้อมูลพื้นฐานเกี่ยวกับ Material Components (MDC) (เว็บ)

logo_components_color_2x_web_96dp.png

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

material.io/develop

Material Design และคอมโพเนนต์ Material สำหรับเว็บคืออะไร

Material Design คือระบบสำหรับการสร้างผลิตภัณฑ์ดิจิทัลที่โดดเด่นและสวยงาม การรวมสไตล์ การสร้างแบรนด์ การโต้ตอบ และการเคลื่อนไหวภายใต้ชุดหลักการและคอมโพเนนต์ที่สอดคล้องกันจะช่วยให้ทีมผลิตภัณฑ์ตระหนักถึงศักยภาพด้านการออกแบบที่ยิ่งใหญ่ที่สุด

สำหรับเดสก์ท็อปและเว็บบนอุปกรณ์เคลื่อนที่ Material Components Web (MDC Web) จะรวมการออกแบบและวิศวกรรมเข้าด้วยกันด้วยไลบรารีของคอมโพเนนต์เพื่อสร้างความสอดคล้องกันในแอปและเว็บไซต์ คอมโพเนนต์ MDC Web แต่ละรายการจะอยู่ในโมดูลโหนดของตัวเอง ดังนั้นเมื่อระบบ Material Design พัฒนาขึ้น คอมโพเนนต์เหล่านี้จะอัปเดตได้ง่ายเพื่อให้มั่นใจว่าการใช้งานจะสอดคล้องกันอย่างสมบูรณ์แบบและเป็นไปตามมาตรฐานการพัฒนาส่วนหน้าของ Google MDC ยังพร้อมใช้งานสำหรับ Android, iOS และ Flutter ด้วย

ในโค้ดแล็บนี้ คุณจะได้สร้างหน้าเข้าสู่ระบบโดยใช้คอมโพเนนต์หลายรายการของ MDC Web

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

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

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

  • ช่องข้อความ 2 ช่อง ช่องหนึ่งสำหรับป้อนชื่อผู้ใช้และอีกช่องสำหรับป้อนรหัสผ่าน
  • ปุ่ม 2 ปุ่ม ปุ่มหนึ่งสำหรับ "ยกเลิก" และอีกปุ่มสำหรับ "ถัดไป"
  • ชื่อของเว็บไซต์ (ศาลเจ้า)
  • รูปภาพโลโก้ของ Shrine

คอมโพเนนต์ MDC Web ใน Codelab นี้

  • ช่องข้อความ
  • ปุ่ม
  • คลื่น

สิ่งที่ต้องมี

  • Node.js เวอร์ชันล่าสุด (มาพร้อมกับ npm ซึ่งเป็นเครื่องมือจัดการแพ็กเกจ JavaScript)
  • โค้ดตัวอย่าง (ดาวน์โหลดได้ในขั้นตอนถัดไป)
  • ความรู้พื้นฐานเกี่ยวกับ HTML, CSS และ JavaScript

เรามองหาวิธีปรับปรุงบทแนะนำอยู่เสมอ คุณจะให้คะแนนระดับประสบการณ์ในการพัฒนาเว็บเท่าใด

ผู้เริ่มต้น ระดับกลาง ผู้ชำนาญ

ดาวน์โหลดแอป Codelab สำหรับผู้เริ่มต้น

ดาวน์โหลดแอปเริ่มต้น

แอปเริ่มต้นจะอยู่ในไดเรกทอรี material-components-web-codelabs-master/mdc-101/starter อย่าลืม cd เข้าไปในไดเรกทอรีนั้นก่อนเริ่มต้น

...หรือโคลนจาก GitHub

หากต้องการโคลนโค้ดแล็บนี้จาก GitHub ให้เรียกใช้คำสั่งต่อไปนี้

git clone https://github.com/material-components/material-components-web-codelabs
cd material-components-web-codelabs/mdc-101/starter

ติดตั้งการอ้างอิงของโปรเจ็กต์

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

npm install

คุณจะเห็นกิจกรรมมากมาย และในตอนท้าย เทอร์มินัลควรแสดงการติดตั้งที่สำเร็จ

หากไม่มี ให้เรียกใช้ npm audit fix

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

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

npm start

webpack-dev-server จะเริ่มขึ้น ป้อน http://localhost:8080/ ในเบราว์เซอร์เพื่อดูหน้าเว็บ

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

ดูโค้ด

ข้อมูลเมตาใน index.html

ในไดเรกทอรีเริ่มต้น ให้เปิด index.html ด้วยโปรแกรมแก้ไขโค้ดที่คุณชื่นชอบ โดยควรมีข้อมูลต่อไปนี้

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <title>Shrine (MDC Web Example App)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" sizes="192x192" href="https://material.io/static/images/simple-lp/favicons/components-192x192.png">
  <link rel="shortcut icon" href="https://material.io/static/images/simple-lp/favicons/components-72x72.png">

  <link rel="stylesheet"
        href="https://cdnjs.cloudflare.com/ajax/libs/normalize/6.0.0/normalize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
  <link rel="stylesheet" href="bundle-login.css">
</head>
<body class="shrine-login">
  <section class="header">
    <svg class="shrine-logo" ...>
      ...
    </svg>
    <h1>SHRINE</h1>
  </section>

  <form action="home.html">
  </form>

  <script src="bundle-login.js" async></script>
</body>
</html>

ในที่นี้ เราใช้แท็ก <link> เพื่อโหลดไฟล์ bundle-login.css ที่สร้างโดย webpack และแท็ก <script> จะรวมไฟล์ bundle-login.js นอกจากนี้ เรายังรวม normalize.css เพื่อให้การแสดงผลในเบราว์เซอร์ต่างๆ สอดคล้องกัน รวมถึงแบบอักษร Roboto จาก Google Fonts

รูปแบบที่กำหนดเองใน login.scss

คอมโพเนนต์ MDC Web ได้รับการจัดรูปแบบโดยใช้คลาส CSS mdc-* เช่น คลาส mdc-text-field (MDC Web ถือว่าโครงสร้าง DOM เป็นส่วนหนึ่งของ API สาธารณะ)

โดยทั่วไป เราขอแนะนำให้คุณแก้ไขสไตล์ที่กำหนดเองในคอมโพเนนต์โดยใช้คลาสของคุณเอง คุณอาจสังเกตเห็นคลาส CSS ที่กำหนดเองบางรายการใน HTML ด้านบน เช่น shrine-logo โดยสไตล์เหล่านี้กำหนดไว้ใน login.scss เพื่อเพิ่มสไตล์พื้นฐานลงในหน้าเว็บ

เปิด login.scss แล้วคุณจะเห็นรูปแบบต่อไปนี้สำหรับหน้าเข้าสู่ระบบ

@import "./common";

.header {
  text-align: center;
}

.shrine-logo {
  width: 150px;
  height: 150px;
  padding-top: 80px;
  fill: currentColor;
}

เมื่อคุณคุ้นเคยกับโค้ดเริ่มต้นแล้ว มาใช้คอมโพเนนต์แรกกัน

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

ติดตั้งช่องข้อความ MDC

คอมโพเนนต์ MDC Web เผยแพร่ผ่านแพ็กเกจ NPM หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ช่องข้อความ ให้เรียกใช้คำสั่งต่อไปนี้

npm install @material/textfield

เพิ่ม HTML

ใน index.html ให้เพิ่มข้อมูลต่อไปนี้ภายในองค์ประกอบ <form> ในส่วนเนื้อหา

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username">
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

โครงสร้าง DOM ของช่องข้อความ MDC ประกอบด้วยหลายส่วน ดังนี้

  • องค์ประกอบหลัก mdc-text-field
  • องค์ประกอบย่อย mdc-text-field__input, mdc-floating-label และ mdc-line-ripple

เพิ่ม CSS

ใน login.scss ให้เพิ่มคำสั่งนำเข้าต่อไปนี้หลังจากการนำเข้าที่มีอยู่

@import "@material/textfield/mdc-text-field";

ในไฟล์เดียวกัน ให้เพิ่มรูปแบบต่อไปนี้เพื่อจัดแนวและจัดกึ่งกลางช่องข้อความ

.username,
.password {
  display: block;
  width: 300px;
  margin: 20px auto;
}

เพิ่ม JavaScript

เปิด login.js ซึ่งตอนนี้ยังว่างเปล่า เพิ่มโค้ดต่อไปนี้เพื่อนำเข้าและสร้างอินสแตนซ์ของช่องข้อความ 

import {MDCTextField} from '@material/textfield';

const username = new MDCTextField(document.querySelector('.username'));
const password = new MDCTextField(document.querySelector('.password'));

เพิ่มการตรวจสอบ HTML5

ช่องข้อความจะแสดงว่าข้อมูลที่ป้อนในช่องถูกต้องหรือมีข้อผิดพลาดหรือไม่ โดยใช้แอตทริบิวต์ที่ API การตรวจสอบความถูกต้องของแบบฟอร์ม HTML5 มีให้

สิ่งที่คุณควรทำมีดังนี้

  • เพิ่มแอตทริบิวต์ required ลงในองค์ประกอบ mdc-text-field__input ของช่องข้อความชื่อผู้ใช้และรหัสผ่าน
  • ตั้งค่าแอตทริบิวต์ minlength ขององค์ประกอบ mdc-text-field__input ของช่องข้อความรหัสผ่านเป็น "8"

ปรับ<div class="mdc-text-field">องค์ประกอบทั้ง 2 ให้มีลักษณะดังนี้

<div class="mdc-text-field username">
  <input type="text" class="mdc-text-field__input" id="username-input" name="username" required>
  <label class="mdc-floating-label" for="username-input">Username</label>
  <div class="mdc-line-ripple"></div>
</div>
<div class="mdc-text-field password">
  <input type="password" class="mdc-text-field__input" id="password-input" name="password" required minlength="8">
  <label class="mdc-floating-label" for="password-input">Password</label>
  <div class="mdc-line-ripple"></div>
</div>

รีเฟรชหน้าที่ http://localhost:8080/ ตอนนี้คุณควรเห็นหน้าเว็บที่มีช่องข้อความ 2 ช่องสำหรับชื่อผู้ใช้และรหัสผ่าน

คลิกช่องข้อความเพื่อดูภาพเคลื่อนไหวของป้ายกำกับแบบลอยและภาพเคลื่อนไหวของเส้นระลอก (เส้นขอบด้านล่างที่ระลอกออกด้านนอก)

จากนั้นเราจะเพิ่มปุ่ม 2 ปุ่มลงในหน้าเข้าสู่ระบบ ได้แก่ "ยกเลิก" และ "ถัดไป" เราจะใช้คอมโพเนนต์ปุ่ม MDC พร้อมกับคอมโพเนนต์ระลอก MDC เพื่อสร้างเอฟเฟกต์ระลอกหมึกอันเป็นเอกลักษณ์ของ Material Design

ติดตั้งปุ่ม MDC

หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ปุ่ม ให้เรียกใช้คำสั่งต่อไปนี้

npm install @material/button

เพิ่ม HTML

ใน index.html ให้เพิ่มข้อความต่อไปนี้ใต้แท็กปิดขององค์ประกอบ <div class="mdc-text-field password">

<div class="button-container">
  <button type="button" class="mdc-button cancel">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Cancel
    </span>
  </button>
  <button class="mdc-button mdc-button--raised next">
    <div class="mdc-button__ripple"></div>
    <span class="mdc-button__label">
      Next
    </span>
  </button>
</div>

สำหรับปุ่ม "ยกเลิก" เราใช้รูปแบบปุ่มเริ่มต้น อย่างไรก็ตาม ปุ่ม "ถัดไป" ใช้ตัวแปรสไตล์ยกขึ้น ซึ่งระบุโดยคลาส mdc-button--raised

เราจะรวมองค์ประกอบ mdc-button ทั้ง 2 รายการไว้ในองค์ประกอบ <div> เพื่อให้จัดแนวได้ง่ายในภายหลัง

เพิ่ม CSS

ใน login.scss ให้เพิ่มคำสั่งนำเข้าต่อไปนี้หลังจากการนำเข้าที่มีอยู่

@import "@material/button/mdc-button";

หากต้องการจัดแนวปุ่มและเพิ่มระยะขอบรอบปุ่ม ให้เพิ่มรูปแบบต่อไปนี้ลงใน login.scss

.button-container {
  display: flex;
  justify-content: flex-end;
  width: 300px;
  margin: auto;
}

.button-container button {
  margin: 3px;
}

เพิ่มเอฟเฟกต์หมึกกระเพื่อมให้กับปุ่ม

เมื่อผู้ใช้แตะหรือคลิกปุ่ม ระบบควรแสดงความคิดเห็นในรูปแบบของระลอกหมึก คอมโพเนนต์ระลอกหมึกต้องใช้ JavaScript ดังนั้นเราจะเพิ่ม JavaScript ลงในหน้าเว็บ

หากต้องการติดตั้งแพ็กเกจสำหรับคอมโพเนนต์ Ripple ให้เรียกใช้คำสั่งต่อไปนี้

npm install @material/ripple

ที่ด้านบนของ login.js ให้เพิ่มคำสั่งนำเข้าต่อไปนี้

import {MDCRipple} from '@material/ripple';

หากต้องการสร้างอินสแตนซ์ของ Ripple ให้เพิ่มโค้ดต่อไปนี้ลงใน login.js

new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));

เนื่องจากเราไม่จำเป็นต้องเก็บการอ้างอิงไปยังอินสแตนซ์ของ Ripple จึงไม่จำเป็นต้องกำหนดให้กับตัวแปร

เท่านี้ก็เรียบร้อย รีเฟรชหน้าเว็บ หมึกจะกระเพื่อมเมื่อคุณคลิกปุ่มแต่ละปุ่ม

กรอกข้อมูลในช่องข้อความด้วยค่าที่ถูกต้อง แล้วกดปุ่ม "ถัดไป" สำเร็จแล้ว! คุณจะทำงานในหน้านี้ต่อใน MDC-102

การใช้มาร์กอัป HTML พื้นฐานและ CSS และ JavaScript เพียงไม่กี่บรรทัด ไลบรารีคอมโพเนนต์ Material สำหรับเว็บช่วยให้คุณสร้างหน้าเข้าสู่ระบบที่สวยงามซึ่งเป็นไปตามหลักเกณฑ์การออกแบบ Material รวมถึงมีลักษณะและทำงานอย่างสอดคล้องกันในอุปกรณ์ทุกเครื่อง

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

ช่องข้อความ ปุ่ม และ Ripple เป็น 3 องค์ประกอบหลักในไลบรารี MDC Web แต่ยังมีอีกมากมาย นอกจากนี้ คุณยังสำรวจคอมโพเนนต์อื่นๆ ใน MDC Web ได้ด้วย

คุณไปที่ MDC-102: โครงสร้างและการจัดวาง Material Design เพื่อดูข้อมูลเกี่ยวกับลิ้นชักการนำทางและรายการรูปภาพได้ ขอขอบคุณที่ลองใช้ Material Components เราหวังว่าคุณจะชอบ Codelab นี้

ฉันทำ Codelab นี้เสร็จได้โดยใช้เวลาและความพยายามที่สมเหตุสมผล

เห็นด้วยอย่างยิ่ง เห็นด้วย เป็นกลาง ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง

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

เห็นด้วยอย่างยิ่ง เห็นด้วย เป็นกลาง ไม่เห็นด้วย ไม่เห็นด้วยอย่างยิ่ง