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 |
Trong lớp học lập trình MDC-101, bạn đã sử dụng hai thành phần Material (MDC) để xây dựng giao diện người dùng của trang đăng nhập: trường văn bản và nút. Bây giờ, hãy mở rộng quy mô này bằng cách thêm thanh điều hướng, cấu trúc và dữ liệu.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ tạo một trang chủ cho ứng dụng có tên là Shrine, một ứng dụng thương mại điện tử bán quần áo và đồ gia dụng. Bảng này gồm có:
- Ngăn điều hướng
- Một danh sách hình ảnh có đầy đủ sản phẩm
Các thành phần web MDC trong lớp học lập trình này
- Ngăn
- Danh sách hình ảnh
Bạn cần có
- Phiên bản gần đây của Node.js (đi kèm với npm, trình quản lý gói JavaScript).
- Mã mẫu (được tải xuống ở bước tiếp theo)
- Kiến thức cơ bản về HTML, CSS và JavaScript
Bạn xếp hạng trải nghiệm phát triển web như thế nào?
Tiếp tục từ MDC-101?
Nếu bạn đã hoàn tất MDC-101, mã của bạn phải được chuẩn bị cho lớp học lập trình này. Chuyển sang bước 3: Thêm ngăn điều hướng.
Tải ứng dụng Lớp học lập trình dành cho người mới bắt đầu
Ứng dụng khởi động nằm trong thư mục material-components-web-codelabs-master/mdc-102/starter. Hãy nhớ cd vào thư mục đó trước khi bắt đầu.
...hoặc sao chép đường liên kết 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-102/starter
Cài đặt phần phụ thuộc dự án
Thư mục hiện tại của bạn phải là material-components-web-codelabs/mdc-102/starter. Từ đó, chạy lệnh sau:
npm install
Sau khi có nhiều hoạt động xuất hiện, thiết bị đầu cuối của bạn sẽ hiển thị bản cài đặt thành công:
Chạy ứng dụng dành cho người mới bắt đầu
Trong cùng một thư mục, hãy làm như sau:
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 trang đăng nhập Đền thờ từ lớp học lập trình MDC-101.
Bây giờ, trang đăng nhập đã ổn, hãy để ứng dụng điền một số sản phẩm vào ứng dụng. Nhập tên người dùng và mật khẩu hợp lệ, rồi nhấp vào nút "Next" để chuyển đến trang chủ.
Khi người dùng đăng nhập, một trang chủ sẽ hiển thị với nội dung: "Bạn đã làm được rồi!"! Thật tuyệt! Nhưng giờ đây, người dùng của chúng tôi cần thực hiện hành động để nắm được vị trí của họ trong ứng dụng. Để trợ giúp họ, hãy thêm phần điều hướng.
Các mẫu điều hướng Material Design mang lại khả năng hữu dụng cao. Ngăn điều hướng Material cung cấp cách di chuyển và truy cập nhanh vào các thao tác khác. Hãy thêm một thẻ.
Cài đặt ngăn và danh sách MDC
Để cài đặt các gói cho thành phần ngăn, hãy chạy:
npm install @material/drawer @material/list
Thêm HTML
Trong home.html, hãy thay "Bạn đã làm được!" bằng mã đánh dấu sau cho ngăn và các mục của ngăn đó:
<aside class="mdc-drawer shrine-drawer">
<div class="mdc-drawer__header">
<svg class="shrine-logo-drawer" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="48px" height="48px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve" fill="#000000" focusable="false">
<g>
<g>
<path d="M17,2H7L2,6.62L12,22L22,6.62L17,2z M16.5,3.58l3.16,2.92H16.5V3.58z M7.59,3.5H15v3H4.34L7.59,3.5z
M11.25,18.1L7.94,13h3.31V18.1z M11.25,11.5H6.96L4.69,8h6.56V11.5z M16.5,12.32 M12.75,18.09V8h6.56L12.75,18.09z"/>
</g>
<rect fill="none" width="24" height="24"/>
</g>
</svg>
<h1 class="shrine-title">SHRINE</h1>
</div>
<div class="mdc-drawer__content">
<nav class="mdc-list">
<a class="mdc-list-item mdc-list-item--activated" aria-selected="true" tabindex="0" href="#">
<span class="mdc-list-item__text">Featured</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Apartment</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Accessories</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Shoes</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Tops</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Bottoms</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">Dresses</span>
</a>
<a class="mdc-list-item" href="#">
<span class="mdc-list-item__text">My Account</span>
</a>
</nav>
</div>
</aside>Thêm CSS
Trong home.scss, hãy thêm các câu lệnh nhập sau đây sau lần nhập hiện có:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";Ở cuối home.scss, hãy thêm các kiểu sau:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}Thêm JavaScript
Chúng ta cần tạo thực thể của Danh sách MDC bên trong ngăn điều hướng để di chuyển thích hợp trên bàn phím. Mở home.js. Hiện tại không có gì và thêm mã sau:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));Làm mới trang tại http://localhost:8080/home.html. Trang chủ của bạn sẽ có dạng như sau:
Giờ đây, trang chủ có một ngăn điều hướng liên tục hiển thị nhiều mục điều hướng, trong đó mục đầu tiên đang hoạt động.
Ứng dụng của chúng ta đã có một số cấu trúc. Hãy sắp xếp nội dung bằng cách đưa nội dung đó vào danh sách hình ảnh.
Cài đặt danh sách hình ảnh MDC
Để cài đặt gói cho thành phần danh sách hình ảnh, hãy chạy:
npm install @material/image-list
Thêm HTML cho danh sách có một mục
Hãy bắt đầu bằng cách thêm danh sách hình ảnh bên cạnh ngăn điều hướng. Chúng tôi sẽ bắt đầu danh sách bằng cách thêm một mục, bao gồm hình ảnh và nhãn văn bản.
Trong home.html, hãy thêm mã HTML sau khi kết thúc phần tử <aside>:
<ul class="mdc-image-list product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>
</ul>Danh sách này bao gồm một lớp bổ sung, product-list, sẽ áp dụng các kiểu tùy chỉnh, cả trong hướng dẫn này và trong MDC-103.
Thêm CSS
Trước tiên, trong home.scss, hãy thêm thông tin nhập cho kiểu thành phần danh sách hình ảnh sau các lần nhập hiện tại:
@import "@material/image-list/mdc-image-list";Tiếp theo, hãy thêm các kiểu sau sau kiểu trang chủ ban đầu:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}Các kiểu này hướng dẫn danh sách hình ảnh hiển thị hình ảnh trên 4 cột, đảm bảo rằng danh sách hình ảnh cuộn độc lập với ngăn.
Hãy làm mới trang. Trang chủ hiện sẽ có dạng như sau:
Danh sách nhằm mục đích hiển thị nhiều hình ảnh trong một bộ sưu tập, vì vậy, hãy cho phép thêm nhiều hình ảnh hơn để xem cách hoạt động của thành phần.
Trong home.html, hãy sao chép phần tử <li> hiện có:
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/weave-keyring.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Weave keyring</span>
</div>
</li>Sau đó, dán đoạn mã này sau mục hiện tại (trước thẻ </ul> đóng) 15 lần. Điều này sẽ dẫn đến tổng cộng 16 hình ảnh. Đừng lo về hình ảnh và tiêu đề độc đáo; bạn sẽ xem được những hình ảnh và tiêu đề đó trong MDC-103.
Làm mới. Bây giờ, trang chủ sẽ có dạng như sau:
Danh sách hình ảnh hiển thị 4 hình ảnh trên mỗi hàng và các hình ảnh sẽ tự động điều chỉnh kích thước cho vừa với không gian màn hình có sẵn.
Trang web của bạn có quy trình cơ bản đưa người dùng từ trang đăng nhập đến trang chủ, nơi có thể xem sản phẩm. Chỉ trong vài dòng mã, bạn đã thêm một ngăn và một danh sách hình ảnh để trình bày nội dung. Trang chủ hiện có cấu trúc và nội dung cơ bản.
Các bước tiếp theo
Với ngăn và danh sách hình ảnh, giờ đây bạn đã sử dụng thêm hai thành phần cốt lõi của Material Design từ thư viện Web MDC! Bạn có thể khám phá thêm các thành phần bằng cách truy cập vào Danh mục web MDC.
Mặc dù hoạt động đầy đủ, nhưng trang chủ không thể hiện bất kỳ thương hiệu hoặc quan điểm cụ thể nào. Trong MDC-103: Material Design Cùng với màu sắc, hình dạng, độ cao và loại, bạn sẽ tùy chỉnh kiểu dáng của các thành phần này để thể hiện thương hiệu sôi động, hiện đại.