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 |
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 thông tin cơ bản cho một ứng dụng có tên 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 chứa sản phẩm.
Material Design gần đây đã mở rộng để giúp nhà thiết kế và nhà phát triển linh hoạt hơn trong việc thể hiện thương hiệu sản phẩm của họ. 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 phản ánh 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 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 web và hệ thống con MADC được sử 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ó
- 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
Tiếp tục từ MDC-102?
Nếu bạn đã hoàn thành MDC-102, mã của bạn đã 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
Ứng dụng khởi đầu này 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ệ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-103/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-103/starter (sẽ 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ẽ hiển thị 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
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 của Đền đang chạy trên trình duyệt. Điền vào các trường Tên người dùng và Mật khẩu, sau đó nhấp vào "Tiếp theo" để chuyển đến trang chủ. Mặt hà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.
Khi ngăn điều hướng đang hoạt động, hãy làm cho ngăn điều hướng này phù hợp với thương hiệu Shrine bằng cách thay đổi màu sắc, độ cao và kiểu chữ.
3. Thay đổi màu sắc
Chủ đề màu sắc này do một nhà thiết kế tạo ra với các màu tuỳ chỉnh (minh hoạ trong hình bên dưới). Thành phần này chứa các màu đã được chọn từ thương hiệu của Shrine và áp dụng cho Material Theme Editor (Trình chỉnh sửa giao diện Material) để tạo ra bảng màu đầy đủ hơn. (Những màu này không phải từ bảng màu Material của 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 _variables.scss, chứa các thành phần 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 ở đầ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 sau các lệnh nhập hiện có:
@import "@material/ripple/mixins";
Sau đó, 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. Bây giờ, màn hình chính sẽ có dạng như sau:
Hãy thay đổi màu của màn hình đăng nhập để 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 trộn sau đây vào 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/. Bây giờ, màn hình đăng nhập của bạn sẽ có dạng như sau:
4. Sửa đổi kiểu chữ và kiểu nhãn
Ngoài việc thay đổi màu sắc, nhà thiết kế cũng cung cấp cho bạn các kiểu chữ cụ thể để sử dụng trên trang web. Hãy thêm biểu tượng đó vào ngăn điều hướng.
Để cài đặt gói này 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 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.
Thêm một dòng phân cách dòng
Trong home.html, hãy thêm nội dung sau đây 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 của 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);
}
}
Hãy làm mới trang. Bây giờ, màn hình chính sẽ có dạng như sau:
5. Điều chỉnh độ cao
Giờ bạn đã tạo kiểu cho trang bằng màu và kiểu chữ đặc trưng của Đền, hãy xem danh sách hình ảnh thể hiện các sản phẩm của Đền. Hãy thu hút sự chú ý vào các sản phẩm bằng cách làm cho chúng nổi bật hơn.
Để cài đặt gói cho Độ cao, 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 đây sau câu lệnh nhập gần đây nhất:
@import "@material/elevation/mdc-elevation";
Gói hình ảnh bằng một div mới
Trong home.html, hãy thêm mã đánh dấu sau đây xung quanh phần tử <ul>:
<div class="shrine-body">
<ul...>
</div>
Thay đổi độ cao bằng cách sử dụng Sass Mixin
Trong home.scss, hãy thêm đoạn mã 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 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 để bóng này lơ lửng một chút 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, nhờ đó, mỗi hình ảnh đều trông riêng 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 những 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ã 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á danh sách kết hợp mdc-image-list-standard-columns(4) rồi thay thế bằng danh sách kết hợp sau đây:
@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ờ phải khớp với mã có trong thư mục complete/.
7. Thử một giao diện khác
Màu sắc là 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ũng có thể ảnh hưởng lớn đến trải nghiệm người dùng. Để kiểm tra điều này, hãy cùng xem đền thờ 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 danh sách kết hợp trong bộ chọn .username, .password. Mã sẽ có dạng như sau:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}
Ngoài ra, hãy xoá chế độ ghi đè hỗn hợp 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 thành 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á kiểu kết hợp mdc-elevation đã dùng trước đó trong bộ chọn .shrine-body.
Tạo và chạy. Lúc nà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
Bạn hiện đã tạo được một ứng dụng giống với thông số kỹ thuật 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ữ, độ cao 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 khác trong Danh mục trang web siêu dữ liệu (MDC).