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 kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google, MDC có hàng chục thành phần giao diện người dùng đẹp mắt và hữu ích, đồng thời có sẵn cho Android, iOS, web và Flutter. material.io/develop |
Material Design và Thành phần Material cho web là gì?
Material Design là một hệ thống để xây dựng các sản phẩm kỹ thuật số nổi bật và đẹp mắt. Bằng cách kết hợp phong cách, thương hiệu, hoạt động 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 sản phẩm có thể nhận ra tiềm năng thiết kế lớn nhất của mình.
Đối với máy tính và web di động, Material Components Web (MDC Web) kết hợp thiết kế và kỹ thuật với một thư viện gồm các thành phần để tạo sự nhất quán trên các ứng dụng và trang web. Mỗi thành phần MDC Web đều nằm trong các mô-đun nút riêng. Vì vậy, 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 nhất quán và chính xác đến từng pixel, đồng thời 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 có sẵn cho Android, iOS và Flutter.
Trong lớp học lập trình này, bạn sẽ tạo 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
Đây là lớp học lập trình đầ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. Phần này sẽ minh hoạ cách bạn có thể tuỳ chỉnh các thành phần để phản ánh mọi thương hiệu hoặc kiểu dáng bằng MDC Web.
Trong lớp học lập trình này, bạn sẽ tạo một trang đăng nhập cho Shrine có 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 "Huỷ" và một nút "Tiếp theo"
- Tên của trang web (Shrine)
- Hình ảnh biểu trưng của Shrine
Các thành phần MDC Web 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ó
- Một 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 ở 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 cải thiện các hướng dẫn của mình. Bạn đánh giá thế nào về trình độ của mình trong lĩnh vực phát triển web?
Tải ứng dụng khởi đầu của lớp học lập trình xuống
Ứng dụng khởi đầu 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ừ 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ẽ cho thấy quá trình cài đặt thành công:
Nếu không, hãy chạy npm audit fix.
Chạy ứng dụng khởi đầu
Trong cùng một thư mục, hãy chạy:
npm start
Gói webpack-dev-server sẽ bắt đầu. Trỏ trình duyệt đến http://localhost:8080/ để xem trang.
Thành công! Mã khởi động cho trang đăng nhập của Shrine sẽ chạy trong trình duyệt của bạn. Bạn sẽ thấy tên "Shrine" và biểu trưng của Shrine 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 chỉnh sửa mã mà bạn yêu thích. Nội dung 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> được 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 có normalize.css để hiển thị nhất quán trên nhiều trình duyệt, cũng như phông chữ Roboto của Google Fonts.
Kiểu tuỳ chỉnh trong login.scss
Các thành phần MDC Web được tạo kiểu bằng cách sử dụ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.)
Nói chung, bạn nên sửa đổi kiểu tuỳ chỉnh cho các thành phần bằng cách sử dụng các lớp của riêng mình. Có thể bạn đã 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 các kiểu cơ bản vào trang.
Mở login.scss, bạn sẽ thấy các kiểu sau 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 động, hãy triển khai thành phần đầu tiên.
Để bắt đầu, chúng ta sẽ thêm 2 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 giúp hiển thị nhãn nổi và kích hoạt hiệu ứng gợn sóng khi chạm.
Cài đặt Trường văn bản MDC
Các thành phần MDC Web được xuất bản thông qua các gói NPM. Để cài đặt gói cho thành phần trường văn bản, hãy chạy:
npm install @material/textfield
Thêm HTML
Trong index.html, hãy thêm nội dung sau vào bên trong phần tử <form> trong nội dung:
<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>Cấu trúc DOM của 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ử con
mdc-text-field__input,mdc-floating-labelvàmdc-line-ripple
Thêm CSS
Trong login.scss, hãy thêm câu lệnh nhập sau đây sau câu lệnh nhập hiện có:
@import "@material/textfield/mdc-text-field";Cũng trong tệp đó, hãy thêm các kiểu sau để căn chỉnh và đặt các trường văn bản ở giữa:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}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 quy trình xác thực HTML5
Các trường văn bản cho biết liệu dữ liệu đầu vào của trường có hợp lệ hay chứa 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
requiredvào các phần tửmdc-text-field__inputcủa cả trường văn bản Username (Tên người dùng) và Password (Mật khẩu) - Đặt thuộc tính
minlengthcủa phần tửmdc-text-field__inputtrong trường văn bản Mật khẩu thành"8"
Điều chỉnh 2 phần tử <div class="mdc-text-field"> để có dạng như sau:
<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>Làm mới trang tại http://localhost:8080/. Lúc này, bạn sẽ thấy một trang có 2 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 cùng gợn sóng ra ngoài):
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ẽ dùng thành phần Nút MDC cùng với thành phần Gợn sóng MDC để hoàn thành hiệu ứng gợn sóng mực mang tính biểu tượng của Material Design.
Cài đặt nút MDC
Để cài đặt gói cho thành phần nút, hãy chạy:
npm install @material/button
Thêm HTML
Trong index.html, hãy thêm nội dung sau vào bên dưới thẻ đóng của phần tử <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>Đối với nút "Huỷ", chúng ta sẽ sử dụng kiểu nút mặc định. Tuy nhiên, nút "Next" (Tiếp theo) sử dụng một biến thể kiểu raised (nổi), được biểu thị bằng lớp mdc-button--raised.
Để dễ dàng căn chỉnh chúng sau này, chúng ta sẽ 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 câu 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 các nút, 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 mực vào các nút
Khi người dùng nhấn hoặc nhấp vào một nút, nút đó sẽ hiển thị thông tin phản hồi dưới dạng hiệu ứng gợn mực. Thành phần hiệu ứng gợn sóng mực yêu cầu phải có JavaScript, vì vậy, chúng ta sẽ thêm thành phần đó vào trang.
Để cài đặt gói cho thành phần gợn sóng, hãy chạy:
npm install @material/ripple
Ở đầu login.js, hãy thêm câu lệnh nhập sau:
import {MDCRipple} from '@material/ripple';Để tạo hiệu ứng gợn sóng, hãy thêm nội dung sau vào login.js:
new MDCRipple(document.querySelector('.cancel'));
new MDCRipple(document.querySelector('.next'));Vì không cần giữ lại một tham chiếu đến thực thể gợn sóng, nên bạn không cần chỉ định tham chiếu đó cho một biến.
Vậy là xong! Làm mới trang. Hiệu ứng gợn mực sẽ xuất hiện 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.
Bằng cách sử dụng mã đánh dấu HTML cơ bản và chỉ một vài dòng CSS và JavaScript, thư viện Thành phần Material cho web đã giúp bạn tạo 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 và hành vi 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à Hiệu ứng gợn sóng là 3 thành phần cốt lõi trong thư viện MDC Web, nhưng còn nhiều thành phần khác nữa! Bạn cũng có thể khám phá các thành phần còn lại trong MDC Web.
Bạn có thể truy cập vào MDC-102: Cấu trúc và bố cục của 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!