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 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à có chức năng, đồ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 tạo 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ế linh hoạt trong ứng dụng hiện tại.
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 một biểu mẫu bằng các thành phần do MDC Web cung cấp:
Các thành phần web MDC 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 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
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 ban đầu của lớp học lập trình xuống
Ứng dụng khởi động 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ệ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-111/starter
Cài đặt phần phụ thuộc dự án
Từ thư mục khởi động (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, thiết bị đầu cuối sẽ hiển thị 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 tổ hợp phím Ctrl+C để đóng máy chủ phát triển. Sau đó, cài đặt gói GMS cho Nút MDC rồi 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 { ... } rồi thêm đoạn mã sau vào:
$mdc-theme-primary: $crane-primary-color;
@import "@material/button/mdc-button";
Cập nhật mã đá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 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 tổ hợp phím Ctrl+C để tắt máy chủ phát triển. Sau đó 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 hiệu ứng gợn sóng trên nút, hãy thêm đoạn mã 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 nội dung như sau:
Giờ đây, nút này hiển thị hiệu ứng gợn sóng tinh tế dưới dạng phản hồi trực quan khi được nhấn.
4. Cập nhật phần tử lựa chọn
Thành phần MDC Select bao bọc một phần tử <select> HTML gốc. Sử dụng nó ở bất cứ nơi nào bạn thường sử dụng <select>. Hãy cập nhật trường "Trạng thái".
Cài đặt mô-đun Nút MDC
Nhấn tổ hợp phím Ctrl+C để đóng máy chủ phát triển. Sau đó 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 mã đá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 mã đánh dấu sau cho mũi tên thả xuống của thành phần Chọn MDC:
<i class="mdc-select__dropdown-icon"></i>
Ngay bên dưới thẻ </select> đóng, hãy thay thế lớp crane-label bằng mdc-floating-label:
<label class="mdc-floating-label" for="crane-state-input">
Sau đó, hãy thêm mã đánh dấu sau ngay sau nhãn:
<div class="mdc-line-ripple"></div>
Cuối cùng, hãy 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 bản sao cho phần lựa 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, giờ đây trang sẽ có dạng như sau:
Thành phần MDC Select cung cấp cho người dùng một danh sách các lựa chọn ở định dạng quen thuộc nhưng mang phong cách 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ó mức độ hữu dụng cao hơn so với các phần tử <input> thuần tuý. Chúng được thiết kế để dễ dàng nhận ra trong nội dung phức tạp và thể hiện 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 Nút MDC
Nhấn tổ hợp phím Ctrl+C để đóng máy chủ phát triển. Sau đó, hãy chạy:
npm install @material/textfield npm start
Thêm CSS
Thêm đoạn mã sau vào _theme.scss, ngay sau khi nhập lựa chọn:
@import "@material/textfield/mdc-text-field";
Cập nhật mã đánh dấu
Trong index.html, hãy tìm phần tử <input> cho trường "Name" (Tên). 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, hãy thay thế lớp crane-label bằng mdc-floating-label:
<label class="mdc-floating-label" for="crane-name-input">
Sau đó, hãy thêm mã đánh dấu sau ngay sau nhãn:
<div class="mdc-line-ripple"></div>
Cuối cùng, hãy gói cả 3 phần tử bằng cách 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.
Mã đánh dấu cho các trường "Address", "Thành phố" và "Mã bưu chính" 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 (các kiểu này không còn được dùng nữa).
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 đoạn mã 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, giờ đây trang sẽ có dạng như sau:
Giờ đây, tất cả các trường văn bản đều đã được cập nhật để sử dụng tính nă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, nút chọn và nút) mà không thiết kế lại hoàn toàn ứng dụng. Thật tuyệt!
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á nhiều thành phần khác trong MDC Web bằng cách truy cập danh mục MDC Web.
Nếu bạn quan tâm đến việc sử dụng MDC Web với một khung cụ thể, hãy xem MDC-112: Tích hợp MDC với khung web.