Trang này được dịch bởi Cloud Translation API.

MDC-101 Web: Kiến thức cơ bản về Thành phần Material (MDC) (Web)

1. Giới thiệu

Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Được tạo bởi một nhóm các kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google, MDC có nhiều thành phần giao diện người dùng đẹp mắt, dễ sử dụng và có sẵn cho Android, iOS, web và Flutter.material.io/develop

Material Design và Material Components cho web là gì?

Material Design là hệ thống để tạo các sản phẩm kỹ thuật số đẹp mắt và ấn tượng. Bằng cách hợp nhất phong cách, cách xây dựng thương hiệu, sự tương tác và chuyển động theo một bộ nguyên tắc và thành phần nhất quán, các nhóm phụ trách sản phẩm có thể phát hiện ra tiềm năng thiết kế lớn nhất của họ.

Đối với web dành cho máy tính và web dành cho thiết bị di động, Material Components Web (MDC Web) kết hợp chủ đề thiết kế và kỹ thuật với một thư viện thành phần để tạo sự nhất quán trên các ứng dụng và trang web. Các thành phần Web MDC đều hoạt động trong các mô-đun nút riêng, do đó, khi hệ thống Material Design phát triển, bạn có thể dễ dàng cập nhật các thành phần này để đảm bảo việc triển khai pixel hoàn hảo và tuân thủ các tiêu chuẩn phát triển giao diện người dùng của Google. MDC cũng hoạt động trên Android, iOS và Flutter.

Trong lớp học lập trình này, bạn sẽ xây dựng một trang đăng nhập bằng cách sử dụng một số thành phần của MDC Web.

Sản phẩm bạn sẽ tạo ra

Lớp học lập trình đầu tiên này là lớp học đầu tiên trong số 3 lớp học lập trình sẽ hướng dẫn bạn cách tạo một ứng dụng có tên là Shrine, một trang web thương mại điện tử bán quần áo và đồ gia dụng. Bản trình bày này sẽ minh hoạ cách bạn có thể tuỳ chỉnh các thành phần để phản ánh bất kỳ thương hiệu hoặc phong cách nào bằng cách sử dụng MDC Web.

Trong lớp học lập trình này, bạn sẽ xây dựng một trang đăng nhập cho Đền chứa:

Hai trường văn bản, một trường để nhập tên người dùng và trường còn lại để nhập mật khẩu
Hai nút, một nút cho thao tác "Huỷ" và một cho "Tiếp theo"
Tên của trang web (Đền)
Hình ảnh biểu trưng của Đền thờ

674d1ca8cfa98c9.png.

Các thành phần web MDC trong lớp học lập trình này

Trường văn bản
Nút
Gợn sóng

Bạn cần có

Phiên bản gần đây của Node.js (đi kèm với npm, một trình quản lý gói JavaScript).
Mã mẫu (sẽ được tải xuống trong bước tiếp theo)
Kiến thức cơ bản về HTML, CSS và JavaScript

Chúng tôi luôn nỗ lực tìm cách cải thiện các hướng dẫn của mình. Bạn đánh giá thế nào về mức độ kinh nghiệm của mình trong lĩnh vực phát triển web?

Người mới tập

Trung cấp

Thành thạo

2. Thiết lập môi trường phát triển

Tải ứng dụng khởi đầu của lớp học lập trình

Ứng dụng khởi đầu này nằm trong thư mục material-components-web-codelabs-master/mdc-101/starter. Hãy nhớ cd vào thư mục đó trước khi bắt đầu.

...hoặc sao chép tệp trên GitHub

Để sao chép lớp học lập trình này từ GitHub, hãy chạy các lệnh sau:

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

Cài đặt các phần phụ thuộc của dự án

Trong thư mục khởi đầu, hãy chạy:

npm install

Bạn sẽ thấy nhiều hoạt động và cuối cùng, thiết bị đầu cuối sẽ hiển thị cài đặt thành công:

204c063d8fd78f94.pngS

Nếu không, hãy chạy npm audit fix.

MDC Web sử dụng một bộ tiền xử lý CSS có tên là Sass. Nếu bạn đang sử dụng một bộ tiền xử lý CSS khác (hoặc không sử dụng bộ tiền xử lý nào), thì bạn không có vấn đề gì! Bạn có thể sử dụng Sass cùng với bộ tiền xử lý hiện tại bằng cách cài đặt CLI sass hoặc sử dụng một trình bổ trợ (ví dụ: sass-loader cho Webpack, gulp-sass cho Gulp hoặc grunt-sass cho Grunt) trong chuỗi công cụ bản dựng.

Để mã của chúng tôi hoạt động trong các trình duyệt cũ hơn như IE 11, chúng tôi sử dụng một trình chuyển đổi có tên là Babel để chuyển đổi cú pháp JavaScript ES2015 của MDC Web xuống cú pháp JavaScript ES5.

Chúng tôi sẽ dùng webpack để nhóm các tệp và phân phát cục bộ trang web. Cấu hình gói web cho dự án này đã được thiết lập cho bạn trong tệp webpack.config.js. Để biết thêm chi tiết về cách định cấu hình thẻ, hãy xem Hướng dẫn bắt đầu sử dụng.

Chạy ứng dụng khởi đầu

Trong cùng một thư mục, hãy chạy:

npm start

webpack-dev-server sẽ bắt đầu. Trỏ trình duyệt của bạn đến http://localhost:8080/ để xem trang.

17c139dc5a9bebaf.png.

Thành công! Mã khởi đầu cho trang đăng nhập của Shrine phải chạy trên trình duyệt của bạn. Bạn sẽ thấy tên "Thuỳ" và biểu trưng Đền thờ ngay bên dưới.

Xem mã

Siêu dữ liệu trong `index.html`

Trong thư mục khởi đầu, hãy mở index.html bằng trình soạn thảo mã mà bạn yêu thích. Mã này phải có:

<!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>

Ở đây, thẻ <link> dùng để tải tệp bundle-login.css do webpack tạo và thẻ <script> bao gồm tệp bundle-login.js. Ngoài ra, chúng tôi còn đưa vào normalize.css để hiển thị nhất quán trên nhiều trình duyệt, cũng như phông chữ Roboto trong Google Fonts.

Kiểu tuỳ chỉnh trong `login.scss`

Các thành phần Web MDC được tạo kiểu bằng các lớp CSS mdc-*, chẳng hạn như lớp mdc-text-field. (MDC Web coi cấu trúc DOM là một phần của API công khai.)

Nhìn chung, bạn nên sửa đổi kiểu tuỳ chỉnh cho các thành phần bằng cách dùng lớp của riêng bạn. Bạn có thể nhận thấy một số lớp CSS tuỳ chỉnh trong HTML ở trên, chẳng hạn như shrine-logo. Các kiểu này được xác định trong login.scss để thêm kiểu cơ bản vào trang.

Mở login.scss và bạn sẽ thấy các kiểu sau đây cho trang đăng nhập:

@import "./common";

.header {
  text-align: center;
}

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

Giờ bạn đã quen với mã khởi đầu, hãy triển khai thành phần đầu tiên.

3. Thêm trường văn bản

Để bắt đầu, chúng tôi sẽ thêm hai trường văn bản vào trang đăng nhập, nơi mọi người có thể nhập tên người dùng và mật khẩu của họ. Chúng ta sẽ sử dụng thành phần Trường văn bản MDC, bao gồm chức năng tích hợp sẵn để hiển thị nhãn nổi và kích hoạt hiệu ứng gợn sóng nhấn.

9ad8a7db0b50f07d.pngS

Cài đặt Trường văn bản MDC

Các thành phần web MDC được xuất bản qua các gói GMS. Để cài đặt gói cho thành phần trường văn bản, hãy chạy mã:

npm install @material/textfield@^6.0.0

Thêm tệp HTML

Trong index.html, hãy thêm nội dung sau đây vào phần tử <form> trong phần nội dung:

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

Cấu trúc DOM trường văn bản MDC bao gồm một số phần:

Phần tử chính, mdc-text-field
Các phần tử phụ mdc-text-field__ripple, mdc-text-field__input, mdc-floating-label và mdc-line-ripple

Thêm CSS

Trong login.scss, hãy thêm câu lệnh nhập sau đây sau lệnh nhập hiện có:

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

Trong cùng tệp đó, hãy thêm các kiểu sau để căn chỉnh và căn giữa các trường văn bản:

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

Thêm JavaScript

Mở login.js (hiện đang trống). Thêm mã sau để nhập và tạo thực thể cho Trường văn bản:

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

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

Thêm phương thức xác thực HTML5

Trường văn bản thể hiện nếu dữ liệu đầu vào của trường hợp lệ hoặc có lỗi, bằng cách sử dụng các thuộc tính do API xác thực biểu mẫu của HTML5 cung cấp.

Bạn nên:

Thêm thuộc tính required vào các phần tử mdc-text-field__input của cả trường văn bản Tên người dùng và Mật khẩu
Đặt thuộc tính minlength của phần tử mdc-text-field__input trong trường văn bản Mật khẩu thành "8"

Điều chỉnh 2 phần tử <label class="mdc-text-field mdc-text-field--filled"> như sau:

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

Làm mới trang tại http://localhost:8080/. Bây giờ, bạn sẽ thấy một trang có hai trường văn bản cho Tên người dùng và Mật khẩu!

Nhấp vào các trường văn bản để xem ảnh động nhãn nổi và ảnh động gợn sóng đường kẻ (đường viền dưới gợn sóng ra ngoài):

4. Thêm nút

Tiếp theo, chúng ta sẽ thêm hai nút vào trang đăng nhập: "Huỷ" và "Tiếp theo". Chúng ta sẽ sử dụng thành phần Nút MDC cùng với thành phần MDC Ripple để hoàn thiện hiệu ứng gợn sóng mực mang tính biểu tượng của Material Design.

674d1ca8cfa98c9.png.

Cài đặt Nút MDC

Để cài đặt gói cho thành phần nút, hãy chạy mã:

npm install @material/button@^6.0.0

Thêm tệp HTML

Trong index.html, hãy thêm nội dung sau đây vào bên dưới thẻ đóng của phần tử <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>

Đối với thông báo "Huỷ" , chúng tôi sẽ sử dụng kiểu nút mặc định. Tuy nhiên, nút "Tiếp theo" nút sử dụng biến thể kiểu được nâng lên, được biểu thị bằng lớp mdc-button--raised.

Để dễ dàng căn chỉnh sau này, chúng ta gói 2 phần tử mdc-button trong một phần tử <div>.

Thêm CSS

Trong login.scss, hãy thêm câu lệnh nhập sau đây sau các lệnh nhập hiện có:

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

Để căn chỉnh các nút và thêm lề xung quanh chúng, hãy thêm các kiểu sau vào login.scss:

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

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

Thêm hiệu ứng gợn sóng vào các nút

Khi người dùng chạm hoặc nhấp vào một nút, nút đó sẽ hiển thị phản hồi ở dạng gợn sóng. Thành phần gợn sóng mực yêu cầu JavaScript, vì vậy chúng ta sẽ thêm JavaScript vào trang.

Để cài đặt gói cho thành phần gợn sóng, hãy chạy mã:

npm install @material/ripple@^6.0.0

Ở đầu login.js, hãy thêm câu lệnh nhập sau:

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

Để tạo thực thể cho hiệu ứng gợn sóng, hãy thêm đoạn mã sau vào login.js:

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

Do chúng ta không cần giữ lại tham chiếu đến thực thể Ripples nên không cần phải gán nó cho biến.

Vậy là xong! Hãy làm mới trang. Một gợn sóng sẽ hiển thị khi bạn nhấp vào từng nút.

Điền các giá trị hợp lệ vào các trường văn bản rồi nhấn nút "TIẾP THEO" . Các bạn đã làm được! Bạn sẽ tiếp tục làm việc trên trang này trong MDC-102.

5. Tóm tắt

Sử dụng mã đánh dấu HTML cơ bản cùng một vài dòng CSS và JavaScript, Thành phần Material cho thư viện web đã giúp bạn tạo ra một trang đăng nhập đẹp mắt, tuân thủ các nguyên tắc của Material Design, đồng thời có giao diện cũng như hoạt động nhất quán trên tất cả các thiết bị.

Các bước tiếp theo

Trường văn bản, Nút và Ripple là 3 thành phần cốt lõi trong thư viện Web MDC, nhưng còn nhiều thành phần khác nữa! Bạn cũng có thể khám phá những thành phần còn lại trong MDC Web.

Bạn có thể truy cập MDC-102: Material Design Structure and Layout (Cấu trúc và bố cục Material Design) để tìm hiểu về ngăn điều hướng và danh sách hình ảnh. Cảm ơn bạn đã dùng thử Thành phần Material. Chúng tôi hy vọng bạn thích lớp học lập trình này!

Tôi đã có thể hoàn thành lớp học lập trình này với khá nhiều thời gian và công sức

Hoàn toàn đồng ý

Đồng ý

Bình thường

Không đồng ý

Hoàn toàn không đồng ý

Tôi muốn tiếp tục sử dụng Thành phần Material trong tương lai

Hoàn toàn đồng ý

Đồng ý

Bình thường

Không đồng ý

Hoàn toàn không đồng ý

MDC-101 Web: Kiến thức cơ bản về Thành phần Material (MDC) (Web)

1. Giới thiệu

Material Design và Material Components cho web là gì?

Sản phẩm bạn sẽ tạo ra

Các thành phần web MDC trong lớp học lập trình này

Bạn cần có

Chúng tôi luôn nỗ lực tìm cách cải thiện các hướng dẫn của mình. Bạn đánh giá thế nào về mức độ kinh nghiệm của mình trong lĩnh vực phát triển web?

2. Thiết lập môi trường phát triển

Tải ứng dụng khởi đầu của lớp học lập trình

...hoặc sao chép tệp trên GitHub

Cài đặt các phần phụ thuộc của dự án

Chạy ứng dụng khởi đầu

Xem mã

Siêu dữ liệu trong index.html

Kiểu tuỳ chỉnh trong login.scss

3. Thêm trường văn bản

Cài đặt Trường văn bản MDC

Thêm tệp HTML

Thêm CSS

Thêm JavaScript

Thêm phương thức xác thực HTML5

4. Thêm nút

Cài đặt Nút MDC

Thêm tệp HTML

Thêm CSS

Thêm hiệu ứng gợn sóng vào các nút

5. Tóm tắt

Các bước tiếp theo

Tôi đã có thể hoàn thành lớp học lập trình này với khá nhiều thời gian và công sức

Tôi muốn tiếp tục sử dụng Thành phần Material trong tương lai

Siêu dữ liệu trong `index.html`

Kiểu tuỳ chỉnh trong `login.scss`