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 |
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 quá 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 khởi đầu của lớp học lập trình
Ứ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ạn 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 các phần phụ thuộc của dự án
Trong 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, 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 của bạn đế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 vị trí của khối này:
$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, rồi lồng nhãn trong phần tử <span> bằng 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
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 tổ hợp phím Ctrl+C để đóng 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 các 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 đoạn mã sau đây 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 giao diện 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 bằng hình ảnh khi nhấn.
4. Cập nhật phần tử lựa chọn
Thành phần Chọn MDC bao bọc phần tử <select> HTML gốc. Hãy sử dụng thuộc tính 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 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 đoạn mã sau vào _theme.scss, ngay sau khi 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ẻ đó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 đó, 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 tệ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ể cho vùng 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. Bây giờ, 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 trường văn bản
Các trường văn bản Material Design có khả năng hữu dụng tăng đáng kể so với các phần tử <input> thuần tuý. Quảng cáo này đượ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 đó 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 đoạn mã như 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 tệ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. Bây giờ, 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, lựa chọn và nút) mà không thiết kế lại hoàn toàn ứng dụng. Tuyệt vời!
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.