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

1. บทนำ

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

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

ผู้ฝึกหัด

ขั้นกลาง

ผู้ชำนาญ

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

ดาวน์โหลดแอป 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

MDC Web ใช้ตัวประมวลผล CSS ล่วงหน้าชื่อ Sass หากคุณใช้ตัวประมวลผล CSS ล่วงหน้าอื่น (หรือไม่ใช้เลย) ก็ไม่เป็นไร คุณสามารถใช้ Sass ควบคู่ไปกับตัวประมวลผลล่วงหน้าปัจจุบันได้โดยติดตั้ง sassCLI หรือใช้ปลั๊กอิน (เช่น sass-loader สำหรับ Webpack, gulp-sass สำหรับ Gulp หรือ grunt-sass สำหรับ Grunt) ในเครื่องมือเชนการสร้าง

เพื่อให้โค้ดของเราทำงานในเบราว์เซอร์รุ่นเก่าอย่าง IE 11 ได้ เราจึงใช้เครื่องมือเปลี่ยนรูปแบบที่เรียกว่า Babel เพื่อเปลี่ยนรูปแบบไวยากรณ์ JavaScript ES2015 ของ MDC Web เป็นไวยากรณ์ JavaScript ES5

เราจะใช้ webpack เพื่อจัดกลุ่มไฟล์และแสดงเว็บไซต์ในเครื่อง ระบบได้ตั้งค่าการกำหนดค่า webpack สำหรับโปรเจ็กต์นี้ไว้ให้คุณแล้วในไฟล์ webpack.config.js โปรดดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีกำหนดค่าได้ที่คู่มือการเริ่มต้นใช้งาน

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

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

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 ได้รับการจัดรูปแบบโดยใช้mdc-*คลาส CSS เช่น คลาส 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. เพิ่มช่องข้อความ

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

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

ดูข้อมูลเพิ่มเติมเกี่ยวกับช่องข้อความที่ปรับปรุงแล้วในบทความในหลักเกณฑ์ของ Material

ติดตั้ง MDC Text Field

คอมโพเนนต์ MDC Web เผยแพร่ผ่านแพ็กเกจ 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 ช่องสำหรับชื่อผู้ใช้และรหัสผ่าน

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

4. เพิ่มปุ่ม

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

ติดตั้งปุ่ม 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>

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

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

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

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

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

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

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

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

5. สรุป

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

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

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

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

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

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เป็นกลาง

ไม่เห็นด้วย

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

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

เห็นด้วยอย่างยิ่ง

เห็นด้วย

เฉยๆ

ไม่เห็นด้วย

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

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

1. บทนำ

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

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

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

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

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

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

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

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

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

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

ดูโค้ด

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

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

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

ติดตั้ง MDC Text Field

เพิ่ม HTML

เพิ่ม CSS

เพิ่ม JavaScript

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

4. เพิ่มปุ่ม

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

เพิ่ม HTML

เพิ่ม CSS

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

5. สรุป

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

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

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

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

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