1. Giới thiệu
Thành phần Material (MDC) giúp nhà phát triển triển khai Material Design. Do một nhóm kỹ sư và nhà thiết kế trải nghiệm người dùng tại Google tạo ra, 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 |
Thành phần Material cho web (MDC Web) không phụ thuộc vào khung, được xây dựng bằng JavaScript thông thường. Điều này giúp MDC Web hoạt động liền mạch với quy trình phát triển của bạn. Bạn có thể cài đặt các thành phần này khi cần để cải thiện thiết kế một cách linh hoạt trong ứng dụng hiện có.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ thay thế một số thành phần hiện có trong biểu mẫu bằng các thành phần do MDC Web cung cấp:
Các thành phần MDC Web trong lớp học lập trình này
- Nút
- Chọn
- Trường văn bản
Bạn cần có
- Phiên bản Node.js gần đây (đ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
Bạn đánh giá mức độ kinh nghiệm của mình về phát triển web như thế nào?
2. Thiết lập môi trường phát triển
Tải ứng dụng lớp học lập trình khởi đầu xuống
Ứng dụng khởi đầu nằm trong thư mục material-components-web-codelabs-master/mdc-111/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-111/starter
Cài đặt phần phụ thuộc của dự án
Từ thư mục khởi đầu (material-components-web-codelabs/mdc-111/starter), hãy chạy:
npm install
Bạn sẽ thấy nhiều hoạt động và cuối cùng, Terminal sẽ hiển thị thông báo cài đặt thành công:
Chạy ứng dụng khởi đầu
Trong thư mục khởi đầu, hãy chạy:
npm start
webpack-dev-server sẽ bắt đầu. Trỏ trình duyệt đến http://localhost:8080/ để xem trang.
Thành công! Bạn sẽ thấy biểu mẫu địa chỉ giao hàng của ứng dụng:
3. Cập nhật nút
Cài đặt nút MDC
Nhấn Ctrl+C để tắt máy chủ phát triển. Sau đó, cài đặt gói NPM nút MDC NPM package và khởi động lại máy chủ:
npm install @material/button npm start
Nhập CSS
Ở đầu _theme.scss, hãy xoá khối .crane-button { ... } và thêm khối sau vào vị trí đó:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Cập nhật đánh dấu
Trong index.html, hãy xoá lớp crane-button khỏi phần tử <button>, thêm các lớp mdc-button và mdc-button--raised, đồng thời lồng nhãn trong phần tử <span> có lớp mdc-button__label:
<button type="submit" class="mdc-button mdc-button--raised">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Save</span>
</button>
Thêm hiệu ứng gợn sóng
Bạn có thể sử dụng các nút MDC mà không cần JavaScript. Tuy nhiên, việc thêm hiệu ứng gợn sóng tương tác vào nút sẽ tạo ra trải nghiệm người dùng phong phú hơn.
Nhấn Ctrl+C để tắt máy chủ phát triển. Sau đó, hãy chạy:
npm install @material/ripple npm start
Thêm câu lệnh nhập sau vào đầu app.js:
import {MDCRipple} from '@material/ripple';
Để tạo thực thể hiệu ứng gợn sóng trên nút, hãy thêm nội dung sau vào cuối app.js:
new MDCRipple(document.querySelector('.mdc-button'));
Nhập phông chữ Roboto
Theo mặc định, Material Design sử dụng Roboto cho kiểu chữ thành phần.
Trong index.html, hãy nhập phông chữ Roboto Web bằng cách thêm nội dung sau vào phần tử <head>:
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700">
Tải lại trang và bạn sẽ thấy như sau:
Nút hiện hiển thị hiệu ứng gợn sóng tinh tế dưới dạng phản hồi trực quan khi nhấn.
4. Cập nhật phần tử chọn
Thành phần MDC Select gói một phần tử HTML <select> gốc. Sử dụng thành phần này ở bất cứ nơi nào bạn thường dùng <select>. Hãy cập nhật trường "State".
Cài đặt mô-đun Node MDC
Nhấn Ctrl+C để tắt máy chủ phát triển. Sau đó, hãy chạy:
npm install @material/select npm start
Nhập CSS
Thêm nội dung sau vào _theme.scss, ngay sau lệnh nhập nút:
@import "@material/select/mdc-select";
Cập nhật đánh dấu
Tìm phần tử <select> trong index.html. Thay thế lớp crane-input bằng mdc-select__native-control:
<select class="mdc-select__native-control" id="crane-state-input" required>
Ngay phía trên thẻ <select>, hãy thêm đánh dấu sau cho mũi tên thả xuống của thành phần MDC Select:
<i class="mdc-select__dropdown-icon"></i>
Ngay bên dưới thẻ đóng </select>, hãy thay thế lớp crane-label bằng mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Sau đó, thêm đánh dấu sau ngay sau nhãn:
<div class="mdc-line-ripple"></div>
Cuối cùng, thêm các thẻ sau xung quanh phần tử <select> (nhưng bên trong phần tử crane-field):
<div class="mdc-select">
...
</div>
Đánh dấu kết quả sẽ có dạng như sau:
<div class="crane-field">
<div class="mdc-select">
<i class="mdc-select__dropdown-icon"></i>
<select class="mdc-select__native-control" id="crane-state-input" required>
<option value="" selected></option>
<option value="AL">Alabama</option>
...
<option value="WI">Wisconsin</option>
<option value="WY">Wyoming</option>
</select>
<label class="mdc-floating-label" for="crane-state-input">
State
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Nhập JS
Thêm câu lệnh nhập sau vào đầu app.js:
import {MDCSelect} from '@material/select';
Để tạo thực thể chọn, hãy thêm nội dung sau vào cuối app.js:
new MDCSelect(document.querySelector('.mdc-select'));
Tải lại trang, trang này hiện sẽ có dạng như sau:
Thành phần MDC Select trình bày danh sách các lựa chọn cho người dùng ở định dạng quen thuộc, nhưng có kiểu dáng hiện đại.
5. Cập nhật các trường văn bản
Các trường văn bản Material Design có nhiều lợi ích về khả năng sử dụng so với các phần tử <input> thông thường. Chúng được thiết kế để dễ dàng xác định trong nội dung phức tạp và hiển thị phản hồi trực quan tinh tế khi người dùng tương tác với chúng.
Cài đặt mô-đun Node MDC
Nhấn Ctrl+C để tắt máy chủ phát triển. Sau đó, hãy chạy:
npm install @material/textfield npm start
Thêm CSS
Thêm nội dung sau vào _theme.scss, ngay sau lệnh nhập chọn:
@import "@material/textfield/mdc-text-field";
Cập nhật đánh dấu
Trong index.html, hãy tìm phần tử <input> cho trường "Name". Thay thế lớp crane-input bằng mdc-text-field__input:
<input class="mdc-text-field__input" id="crane-name-input" type="text" required autofocus>
Tiếp theo, thay thế lớp crane-label bằng mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Sau đó, thêm đánh dấu sau ngay sau nhãn:
<div class="mdc-line-ripple"></div>
Cuối cùng, gói tất cả 3 phần tử bằng nội dung sau:
<div class="mdc-text-field">
...
</div>
Đánh dấu kết quả sẽ có dạng như sau:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-name-input"
type="text" required autofocus>
<label class="mdc-floating-label" for="crane-name-input">
Name
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Lặp lại quy trình tương tự cho tất cả các phần tử <input> khác trên trang.
Đánh dấu cho các trường "Address", "City" và "ZIP Code" sẽ có dạng như sau:
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-address-input" type="text" required>
<label class="mdc-floating-label" for="crane-address-input">
Address
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-city-input" type="text" required>
<label class="mdc-floating-label" for="crane-city-input">
City
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
<div class="crane-field">
<div class="mdc-text-field">
<input class="mdc-text-field__input" id="crane-zip-code-input"
type="text" required minlength="5" maxlength="5" pattern="[0-9]*">
<label class="mdc-floating-label" for="crane-zip-code-input">
ZIP Code
</label>
<div class="mdc-line-ripple"></div>
</div>
</div>
Giờ đây, bạn có thể xoá các kiểu .crane-label và .crane-input khỏi _theme.scss, vì các kiểu này không còn được sử dụng.
Nhập JS
Thêm câu lệnh nhập sau vào đầu app.js:
import {MDCTextField} from '@material/textfield';
Để tạo thực thể cho các trường văn bản, hãy thêm nội dung sau vào cuối app.js:
const textFieldElements = [].slice.call(document.querySelectorAll('.mdc-text-field'));
textFieldElements.forEach((textFieldEl) => {
new MDCTextField(textFieldEl);
});
Tải lại trang, trang này hiện sẽ có dạng như sau:
Tất cả các trường văn bản hiện đã được cập nhật để sử dụng Tuỳ chỉnh giao diện Material.
6. Tóm tắt
Bạn đã thay thế một số thành phần phổ biến (trường văn bản, chọn và nút) mà không cần thiết kế lại hoàn toàn ứng dụng. Làm tốt lắm!
Các thành phần khác cũng có thể tạo ra sự khác biệt lớn bao gồm thanh ứng dụng trên cùng và ngăn điều hướng.
Các bước tiếp theo
Bạn có thể khám phá thêm nhiều thành phần trong MDC Web bằng cách truy cập vào danh mục MDC Web.
Nếu bạn muốn sử dụng MDC Web với một khung cụ thể, hãy chuyển đến MDC-112: Tích hợp MDC với các khung web.