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

1. บทนำ

logo_components_color_2x_web_96dp.png

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

ดีไซน์ Material และคอมโพเนนต์เนื้อหาสำหรับเว็บคืออะไร

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

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

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

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

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

ใน Codelab นี้ คุณจะสร้างหน้าเข้าสู่ระบบสำหรับ Shrine ที่มี:

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

674d1ca8cfa98c9.png

คอมโพเนนต์เว็บของ MMDC ใน Codelab นี้

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

สิ่งที่คุณต้องมี

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

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

มือใหม่ ระดับกลาง ผู้ชำนาญ

2. ตั้งค่าสภาพแวดล้อมในการพัฒนาซอฟต์แวร์

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

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

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

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

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

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

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

npm install

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

204c063d8fd78f94.png

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

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

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

npm start

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

17c139dc5a9bebaf.png

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

f7e3f354df8d84b8.png

ดูโค้ด

ข้อมูลเมตาใน 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 ได้รับการจัดรูปแบบโดยใช้คลาส 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;
}

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

3. เพิ่มช่องข้อความ

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

9ad8a7db0b50f07d.png

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

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

npm install @material/textfield@^6.0.0

เพิ่ม HTML

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

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username">
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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

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

เพิ่ม CSS

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

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

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

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

เพิ่ม 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"

ปรับองค์ประกอบ <label class="mdc-text-field mdc-text-field--filled"> 2 รายการให้มีลักษณะเช่นนี้

<label class="mdc-text-field mdc-text-field--filled username">
  <span class="mdc-text-field__ripple"></span>
  <input type="text" class="mdc-text-field__input" aria-labelledby="username-label" name="username" required>
  <span class="mdc-floating-label" id="username-label">Username</span>
  <span class="mdc-line-ripple"></span>
</label>
<label class="mdc-text-field mdc-text-field--filled password">
  <span class="mdc-text-field__ripple"></span>
  <input type="password" class="mdc-text-field__input" aria-labelledby="password-label" name="password" required minlength="8">
  <span class="mdc-floating-label" id="password-label">Password</span>
  <span class="mdc-line-ripple"></span>
</label>

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

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

c0b341e9949a6183.gif

4. เพิ่มปุ่ม

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

674d1ca8cfa98c9.png

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

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

npm install @material/button@^6.0.0

เพิ่ม HTML

ใน index.html ให้เพิ่มค่าต่อไปนี้ใต้แท็กปิดขององค์ประกอบ <label class="mdc-text-field mdc-text-field--filled 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>

สำหรับขั้นตอน "ยกเลิก" เราจะใช้รูปแบบปุ่มเริ่มต้น อย่างไรก็ตาม "ถัดไป" ใช้ตัวแปรของรูปแบบ raified ซึ่งระบุโดยคลาส 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 เราจึงจะเพิ่มองค์ประกอบดังกล่าวลงในหน้าเว็บ

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

npm install @material/ripple@^6.0.0

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

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

ในการสร้าง Ripples ให้เพิ่มค่าต่อไปนี้ใน login.js

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

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

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

bb19b0a567977bde.gif

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

5. สรุป

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

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

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

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

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

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

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

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