Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MDC memiliki banyak komponen UI yang indah dan fungsional serta tersedia untuk Android, iOS, web, dan Flutter. material.io/develop |
Dalam codelab MDC-101 dan MDC-102, Anda menggunakan Komponen Material (MDC) untuk membuat dasar-dasar aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Alur pengguna aplikasi ini dimulai dengan layar login, yang kemudian mengarahkan pengguna ke layar utama yang berisi produk.
Desain Material baru-baru ini diperluas untuk meningkatkan fleksibilitas desainer dan developer dalam mengekspresikan merek produk mereka. Dalam codelab ini, Anda akan menggunakan MDC untuk menyesuaikan aplikasi Shrine agar mencerminkan gaya unik merek dengan lebih banyak cara daripada sebelumnya.
Yang akan Anda bangun
Dalam codelab ini, Anda akan menyesuaikan Shrine agar mencerminkan mereknya menggunakan:
- Warna
- Tipografi
- Ketinggian
- Bentuk
- Tata Letak
Komponen dan subsistem MDC Web yang digunakan dalam codelab ini
- Tema
- Tipografi
- Ketinggian
- Daftar gambar
Yang Anda butuhkan
- Node.js versi terbaru (yang disertakan dengan npm, pengelola paket JavaScript).
- Kode contoh (yang akan didownload pada langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Bagaimana Anda menilai tingkat pengalaman Anda dalam pengembangan web?
Melanjutkan dari MDC-102?
Jika Anda sudah menyelesaikan MDC-102, kode Anda seharusnya siap untuk codelab ini. Lewati ke langkah 3: Mengubah warna.
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-103/starter. Pastikan untuk cd ke direktori tersebut sebelum memulai.
...atau meng-clone codelab dari GitHub
Untuk meng-clone codelab ini dari GitHub, jalankan perintah berikut:
git clone https://github.com/material-components/material-components-web-codelabs cd material-components-web-codelabs/mdc-103/starter
Instal dependensi project
Dari direktori starter material-components-web-codelabs/mdc-103/starter (seharusnya direktori Anda saat ini jika Anda mengikuti langkah di atas), jalankan:
npm install
Anda akan melihat banyak aktivitas dan di akhir, terminal Anda akan menampilkan penginstalan yang berhasil:
Menjalankan aplikasi awal
Di direktori yang sama, jalankan:
npm start
webpack-dev-server akan dimulai. Arahkan browser Anda ke http://localhost:8080/ untuk melihat halaman.
Berhasil! Anda akan melihat halaman login Shrine berjalan di browser Anda. Isi kolom Nama Pengguna dan Sandi, lalu klik tombol "Berikutnya" untuk membuka halaman beranda. Aplikasi ini akan menampilkan panel navigasi di sebelah kiri, di samping petak gambar produk.
Meskipun berfungsi, mari kita sesuaikan laci navigasi dengan merek Shrine dengan mengubah warna, ketinggian, dan tipografinya.
Tema warna ini telah dibuat oleh desainer dengan warna kustom (ditampilkan di gambar di bawah). Tema warna ini berisi warna yang telah dipilih dari merek Shrine dan diterapkan ke Material Theme Editor, yang telah memperluasnya untuk membuat palet yang lebih lengkap. (Warna ini bukan dari palet warna Material 2014.)
Mari kita ubah warna panel navigasi aplikasi Shrine agar mencerminkan skema warna tersebut.
Mengganti warna tema
Buat file baru bernama _variables.scss, yang berisi kode berikut:
$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;Kemudian, impor di bagian paling atas _common.scss:
@import "./variables";Menambahkan gaya CSS ke panel navigasi
Di home.scss, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/ripple/mixins";Kemudian, tambahkan gaya berikut, buat class .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);
}
}Muat ulang halaman di http://localhost:8080/home.html. Layar utama Anda sekarang akan terlihat seperti ini:
Mari kita ubah warna layar login agar sesuai dengan skema warna kita.
Menambahkan gaya CSS ke halaman login
Di login.scss, tambahkan baris berikut:
.shrine-login {
background-color: $mdc-theme-background;
color: $mdc-theme-on-background;
}
.cancel {
@include mdc-button-ink-color(on-primary);
}Selain itu, tambahkan pemanggilan mixin berikut di dalam pemilih 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);
}
...
}Muat ulang halaman di http://localhost:8080/. Layar login Anda sekarang akan terlihat seperti ini:
Selain perubahan warna, desainer juga telah memberi Anda tipografi spesifik untuk digunakan di situs. Mari kita tambahkan juga ke panel navigasi.
Untuk menginstal paket Tipografi, jalankan:
npm install @material/typography
Menambahkan CSS untuk tipografi
Di home.scss, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/typography/mdc-typography";Kemudian, tambahkan pemanggilan mixin berikut ke class shrine-title:
.shrine-title {
@include mdc-typography(headline6);
...
}Selanjutnya, mari kita beri gaya pada item drawer.
Menambahkan pemisah baris
Di home.html, tambahkan kode berikut tepat setelah elemen <a ...>Featured</a>:
<div class="shrine-select-item-divider mdc-list-divider" role="separator"></div>Tambahkan gaya berikut ke 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;
}Menyesuaikan item dan label gambar
Untuk menyesuaikan item dan label, tambahkan gaya berikut ke home.scss dalam pemilih .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);
}
}Muat ulang halaman. Layar utama Anda sekarang akan terlihat seperti ini:
Setelah Anda memberikan gaya pada halaman dengan warna dan tipografi spesifik Shrine, mari kita lihat daftar gambar yang menampilkan produk Shrine. Mari kita menarik perhatian ke produk dengan memberikan penekanan yang lebih besar.
Untuk menginstal paket untuk Elevation, jalankan:
npm install @material/elevation
Tambahkan pernyataan impor
Di home.scss, tambahkan baris berikut setelah pernyataan impor terakhir:
@import "@material/elevation/mdc-elevation";Bungkus daftar gambar dengan div baru
Di home.html, tambahkan markup berikut di sekitar elemen <ul>:
<div class="shrine-body">
<ul...>
</div>Mengubah ketinggian menggunakan mixin Sass
Di home.scss, tambahkan kode berikut:
.shrine-body {
@include mdc-elevation(4);
display: block;
overflow: auto;
z-index: 0; // Elevate over the drawer
}Luar biasa! Anda telah menambahkan bayangan ke tepi kiri permukaan putih di belakang item daftar gambar, sehingga tampak mengambang sedikit di atas navigasi.
Selanjutnya, mari kita ubah tata letak untuk menampilkan gambar dalam ukuran dan rasio aspek yang berbeda, sehingga setiap gambar terlihat unik dari gambar lain.
Ubah HTML
Dalam home.html, perbarui elemen mdc-image-list agar berisi class mdc-image-list--masonry:
<ul class="mdc-image-list mdc-image-list--masonry product-list">Menambahkan gambar
Di home.html, ubah atribut src setiap elemen img agar sesuai dengan gambar yang ada di folder assets. Kemudian, perbarui teks label untuk setiap gambar. Setelah selesai, tampilannya akan terlihat seperti ini:
<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>Memperbarui CSS
Di home.scss, hapus mixin mdc-image-list-standard-columns(4) dan ganti dengan mixin berikut:
@include mdc-image-list-masonry-columns(4);Kemudian, tambahkan nilai padding berikut ke class product-list di home.scss:
.product-list {
...
padding: 80px 100px 0;
}
Kode Anda sekarang seharusnya cocok dengan kode yang disertakan dalam folder complete/.
Warna adalah cara efektif untuk mengekspresikan merek Anda, dan perubahan kecil pada warna dapat berpengaruh besar pada pengalaman pengguna Anda. Untuk mengujinya, mari kita lihat tampilan Shrine jika skema warna mereknya benar-benar berbeda.
Mengubah CSS
Di _variables.scss, ganti variabel yang Anda deklarasikan untuk tema utama dengan yang berikut:
$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;Di login.scss, hapus mixin di pemilih .username, .password. Tampilannya akan terlihat seperti berikut:
.username,
.password {
display: block;
width: 300px;
margin: 20px auto;
}Selain itu, hapus penggantian mixin mdc-button-ink-color di class .cancel:
Di home.scss, tambahkan aturan berikut ke class .home:
background-color: $mdc-theme-background;Dalam pemilih .shrine-logo-drawer, ganti properti fill menjadi warna on-primary:
.shrine-logo-drawer {
...
fill: $mdc-theme-on-primary;
}Demikian pula, dalam pemilih .shrine-title, tetapkan properti color menjadi warna on-primary:
.shrine-title {
...
color: $mdc-theme-on-primary;
}
Terakhir, hapus mixin mdc-elevation yang digunakan sebelumnya di bawah pemilih .shrine-body.
Build dan jalankan. Sekarang, tema baru akan muncul di browser Anda.
Sekarang, buka http://localhost:8080/home.html untuk melihat perubahan pada halaman home.html.
Sekarang Anda telah membuat aplikasi yang menyerupai spesifikasi desainer Anda.
Langkah berikutnya
Sekarang Anda telah menggunakan komponen MDC berikut: tema, tipografi, ketinggian, dan bentuk. Anda dapat mempelajari lebih banyak komponen dan subsistem di MDC Web Catalog.