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 |
Trong các lớp học lập trình MDC-101 và MDC-102, bạn đã sử dụng Thành phần Material (MDC) để xây dựng các thành phần cơ bản của một ứ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. Luồng người dùng của ứng dụng này bắt đầu bằng màn hình đăng nhập, sau đó đưa người dùng đến màn hình chính có chứa các sản phẩm.
Gần đây, Material Design đã mở rộng để mang đến cho nhà thiết kế và nhà phát triển khả năng linh hoạt hơn trong việc thể hiện thương hiệu của sản phẩm. Trong lớp học lập trình này, bạn sẽ sử dụng MDC để tuỳ chỉnh ứng dụng Shrine nhằm thể hiện phong cách độc đáo của thương hiệu theo nhiều cách hơn bao giờ hết.
Sản phẩm bạn sẽ tạo ra
Trong lớp học lập trình này, bạn sẽ tuỳ chỉnh Shrine để thể hiện thương hiệu của ứng dụng bằng cách sử dụng:
- Màu
- Kiểu chữ
- Độ cao
- Hình dạng
- Bố cục
Các thành phần và hệ thống con MDC Web được dùng trong lớp học lập trình này
- Chủ đề
- Kiểu chữ
- Độ cao
- Danh sách hình ảnh
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
Bạn đánh giá thế nào về trình độ 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
Tiếp tục từ MDC-102?
Nếu bạn đã hoàn thành MDC-102, thì mã của bạn sẽ sẵn sàng cho lớp học lập trình này. Chuyển sang bước 3: Thay đổi màu.
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-103/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-103/starter
Cài đặt các phần phụ thuộc của dự án
Từ thư mục khởi động material-components-web-codelabs/mdc-103/starter (đây phải là thư mục hiện tại của bạn nếu bạn làm theo bước trên), 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:
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! Bạn sẽ thấy trang đăng nhập của Shrine đang chạy trong trình duyệt. Điền thông tin vào các trường Tên người dùng và Mật khẩu, rồi nhấp vào nút "Tiếp theo" để chuyển đến trang chủ. Ứng dụng này sẽ hiển thị một ngăn điều hướng ở bên trái, bên cạnh một lưới hình ảnh sản phẩm.
Mặc dù ngăn điều hướng hoạt động bình thường, nhưng chúng ta hãy thay đổi màu sắc, độ cao và kiểu chữ của ngăn này để phù hợp với thương hiệu Shrine.
3. Thay đổi màu
Chủ đề màu sắc này đã được nhà thiết kế tạo bằng các màu sắc tuỳ chỉnh (như trong hình ảnh bên dưới). Tệp này chứa những màu được chọn từ thương hiệu của Shrine và áp dụng cho Material Theme Editor. Nhờ đó, bảng màu được mở rộng hơn. (Những màu này không có trong bảng màu Material năm 2014.)
Hãy thay đổi màu của ngăn điều hướng trong ứng dụng Shrine để phản ánh bảng phối màu đó.
Ghi đè màu giao diện
Tạo một tệp mới có tên là _variables.scss, chứa nội dung sau:
$mdc-theme-primary: #FEDBD0;
$mdc-theme-on-primary: #442C2E;
$mdc-theme-secondary: #FEEAE6;
$mdc-theme-on-secondary: #442C2E;
$mdc-theme-surface: #FFFBFA;
$mdc-theme-on-surface: #442C2E;
$mdc-theme-background: #FFFFFF;
$mdc-theme-on-background: #442C2E;
Sau đó, hãy nhập tệp này ở ngay đầu _common.scss:
@import "./variables";
Thêm kiểu CSS vào ngăn điều hướng
Trong home.scss, hãy thêm câu lệnh nhập sau vào các câu lệnh nhập hiện có:
@import "@material/ripple/mixins";
Sau đó, hãy thêm các kiểu sau để tạo lớp .shrine-drawer:
.shrine-drawer {
@include mdc-drawer-fill-color-accessible(primary);
// Drawer defaults to a higher z-index, but we aren't overlaying it over anything
@include mdc-drawer-z-index(0);
text-transform: uppercase;
.mdc-list {
margin: 70px 5px auto 5px;
}
.mdc-list-item {
border-radius: 6px;
justify-content: center;
}
// This needs 3-class specificity to override MDC Drawer styles
.mdc-list .mdc-list-item {
@include mdc-states-activated(#fff);
}
}
Làm mới trang tại http://localhost:8080/home.html. Màn hình chính của bạn hiện sẽ có dạng như sau:
Hãy thay đổi màu của màn hình đăng nhập cho phù hợp với bảng phối màu của chúng ta.
Thêm kiểu CSS vào trang đăng nhập
Trong login.scss, hãy thêm các dòng sau:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}
Ngoài ra, hãy thêm các lệnh gọi mixin sau đây vào bên trong bộ chọn CSS .username, .password:
.username,
.password {
&:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
&.mdc-text-field--focused:not(.mdc-text-field--invalid) {
@include mdc-text-field-label-color(on-primary);
}
...
}
Làm mới trang tại http://localhost:8080/. Màn hình đăng nhập của bạn hiện sẽ có dạng như sau:
4. Sửa đổi kiểu chữ và kiểu nhãn
Ngoài các thay đổi về màu sắc, nhà thiết kế cũng đã cung cấp cho bạn kiểu chữ cụ thể để sử dụng trên trang web. Hãy thêm phần đó vào ngăn điều hướng.
Để cài đặt gói cho Kiểu chữ, hãy chạy:
npm install @material/typography
Thêm CSS cho kiểu chữ
Trong home.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/typography/mdc-typography";
Sau đó, hãy thêm lệnh gọi mixin sau vào lớp shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}
Tiếp theo, hãy tạo kiểu cho các mục trong ngăn kéo.
Thêm đường phân cách
Trong home.html, hãy thêm nội dung sau ngay sau phần tử <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>
Thêm các kiểu sau vào home.scss:
.shrine-select-item-divider {
display: block;
border-bottom-color: #EAA4A4;
border-bottom-width: 2px;
width: 50px;
position: relative;
top: -8px;
}
// This needs 2-class specificity to override MDC Drawer styles
.shrine-drawer .shrine-select-item-divider {
margin: 0 auto;
}
Điều chỉnh các mục và nhãn hình ảnh
Để điều chỉnh các mục và nhãn, hãy thêm các kiểu sau vào home.scss trong bộ chọn .product-list:
.product-list {
...
.mdc-image-list__supporting {
justify-content: center;
}
.mdc-image-list__item {
padding: 10px;
}
.mdc-image-list__label {
@include mdc-typography(subtitle2);
}
}
Làm mới trang. Màn hình chính của bạn hiện sẽ có dạng như sau:
5. Điều chỉnh độ cao
Bây giờ bạn đã tạo kiểu cho trang bằng bảng phối màu và kiểu chữ cụ thể của Shrine, hãy xem danh sách hình ảnh cho thấy các sản phẩm của Shrine. Hãy thu hút sự chú ý đến các sản phẩm bằng cách nhấn mạnh hơn vào chúng.
Để cài đặt gói cho Elevation, hãy chạy:
npm install @material/elevation
Thêm câu lệnh nhập
Trong home.scss, hãy thêm dòng sau sau câu lệnh nhập cuối cùng:
@import "@material/elevation/mdc-elevation";
Bọc danh sách hình ảnh bằng một thẻ div mới
Trong home.html, hãy thêm mã đánh dấu sau vào xung quanh phần tử <ul>:
<div class="shrine-body">
<ul...>
</div>
Thay đổi độ nâng bằng cách sử dụng các mixin Sass
Trong home.scss, hãy thêm nội dung sau:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}
Thật ấn tượng! Bạn đã thêm một bóng đổ vào cạnh trái của bề mặt màu trắng phía sau các mục trong danh sách hình ảnh, để các mục đó xuất hiện hơi nổi lên phía trên phần điều hướng.
6. Thay đổi bố cục
Tiếp theo, hãy thay đổi bố cục để hiển thị hình ảnh ở nhiều tỷ lệ khung hình và kích thước, sao cho mỗi hình ảnh trông khác biệt so với những hình ảnh khác.
Sửa đổi HTML
Trong home.html, hãy cập nhật phần tử mdc-image-list để chứa lớp mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
Thêm hình ảnh
Trong home.html, hãy thay đổi thuộc tính src của từng phần tử img để khớp với hình ảnh nằm trong thư mục assets. Sau đó, hãy cập nhật văn bản nhãn cho từng hình ảnh. Sau khi hoàn tất, mã này sẽ có dạng như sau:
<ul class="mdc-image-list mdc-image-list--masonry product-list">
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/ginger-scarf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Ginger scarf</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/blue-stone-mug.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Blue stone mug</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/cerise-scallop.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Cerise scallop tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/chambray-napkins.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Chambray napkins</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/fine-lines.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Fine lines tee</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/garden-strand.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Garden strand</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gatsby-hat.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gatsby hat</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/gilt-desk-trio.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Gilt desk trio</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/kitchen-quattro.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Kitchen quattro</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/seabreeze-sweater.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Seabreeze sweater</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/shrug-bag.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Shrug bag</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/stella-sunglasses.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Stella sunglasses</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/surf-and-perf.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Surf and perf shirt</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/vagabond-sack.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Vagabond sack</span>
</div>
</li>
<li class="mdc-image-list__item">
<img class="mdc-image-list__image" src="assets/walter-henley.jpg">
<div class="mdc-image-list__supporting">
<span class="mdc-image-list__label">Walter henley (white)</span>
</div>
</li>
<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>
Cập nhật CSS
Trong home.scss, hãy xoá mixin mdc-image-list-standard-columns(4) và thay thế bằng mixin sau:
@include mdc-image-list-masonry-columns(4);
Sau đó, hãy thêm các giá trị padding sau vào lớp product-list trong home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Mã của bạn bây giờ sẽ khớp với mã có trong thư mục complete/.
7. Thử dùng một chủ đề khác
Màu sắc là một cách hiệu quả để thể hiện thương hiệu của bạn, và một thay đổi nhỏ về màu sắc có thể ảnh hưởng lớn đến trải nghiệm người dùng. Để thử nghiệm, hãy xem Shrine sẽ trông như thế nào nếu bảng phối màu của thương hiệu hoàn toàn khác.
Sửa đổi CSS
Trong _variables.scss, hãy thay thế các biến mà bạn đã khai báo cho giao diện chính bằng các biến sau:
$mdc-theme-primary: #5D1049;
$mdc-theme-on-primary: #FFFFFF;
$mdc-theme-secondary: #E30425;
$mdc-theme-on-secondary: #FFFFFF;
$mdc-theme-surface: #FFFFFF;
$mdc-theme-on-surface: #000000;
$mdc-theme-background: #F4E2ED;
$mdc-theme-on-background: #000000;
Trong login.scss, hãy xoá các mixin trong bộ chọn .username, .password. Nội dung sẽ có dạng như sau:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Ngoài ra, hãy xoá chế độ ghi đè mixin mdc-button-ink-color trong lớp .cancel:
Trong home.scss, hãy thêm quy tắc sau vào lớp .home:
background-color: $mdc-theme-background;
Trong bộ chọn .shrine-logo-drawer, hãy thay thế thuộc tính fill bằng màu on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}
Tương tự, trong bộ chọn .shrine-title, hãy đặt thuộc tính color thành màu on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Cuối cùng, hãy xoá mixin mdc-elevation đã dùng trước đó trong bộ chọn .shrine-body.
Tạo bản dựng và chạy. Giờ đây, giao diện mới sẽ xuất hiện trong trình duyệt của bạn.
Bây giờ, hãy chuyển đến http://localhost:8080/home.html để xem các thay đổi đối với trang home.html.
8. Tóm tắt
Giờ thì bạn đã tạo một ứng dụng giống với quy cách của nhà thiết kế.
Các bước tiếp theo
Giờ đây, bạn đã sử dụng các thành phần MDC sau: giao diện, kiểu chữ, độ nâng và hình dạng. Bạn có thể khám phá thêm các thành phần và hệ thống con trong Danh mục MDC Web.