1. Pengantar
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, Anda menggunakan dua Komponen Material (MDC) untuk mem-build UI halaman login: kolom teks dan tombol. Sekarang, mari kita perluas hal ini dengan menambahkan navigasi, struktur, dan data.
Yang akan Anda bangun
Dalam codelab ini, Anda akan mem-build halaman beranda untuk aplikasi bernama Shrine, sebuah aplikasi e-commerce yang menjual pakaian dan perlengkapan rumah. Layar utama ini akan berisi:
- Panel navigasi
- Daftar gambar yang penuh dengan produk
Komponen Web MDC dalam codelab ini
- Panel samping
- Daftar gambar
Yang Anda butuhkan
- Node.js versi terbaru (yang dipaketkan dengan npm, pengelola paket JavaScript).
- Kode contoh (akan didownload di langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Menurut Anda, bagaimana tingkat pengalaman Anda dalam pengembangan web?
2. Menyiapkan lingkungan pengembangan
Melanjutkan dari MDC-101?
Jika Anda sudah menyelesaikan MDC-101, kode Anda untuk codelab ini seharusnya sudah disiapkan. Lewati ke langkah 3: Tambahkan panel navigasi.
Mendownload aplikasi codelab awal
Aplikasi awal terletak di direktori material-components-web-codelabs-master/mdc-102/starter. Pastikan untuk memasukkan cd ke dalam 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-102/starter
Menginstal dependensi project
Direktori Anda saat ini seharusnya material-components-web-codelabs/mdc-102/starter.. Dari sana, jalankan perintah berikut:
npm install
Setelah banyak aktivitas muncul, terminal Anda akan menampilkan penginstalan yang berhasil:
Menjalankan aplikasi awal
Di direktori yang sama, jalankan ini:
npm start
webpack-dev-server akan dimulai. Arahkan browser Anda ke http://localhost:8080/ untuk melihat halaman.
Berhasil! Anda akan melihat halaman login Shrine dari codelab MDC-101.
Setelah halaman login terlihat bagus, mari isi aplikasi dengan beberapa produk. Masukkan nama pengguna dan sandi yang valid, lalu klik tombol "Berikutnya" untuk membuka halaman beranda.
3. Menambahkan panel navigasi
Saat pengguna login, halaman beranda akan ditampilkan yang bertuliskan, "Anda berhasil!" Bagus! Namun, pengguna sekarang memerlukan tindakan yang harus dilakukan dan mengetahui posisi mereka di aplikasi. Untuk membantu melakukan hal tersebut, mari tambahkan navigasi.
Pola navigasi Desain Material menawarkan tingkat kegunaan yang tinggi. Panel navigasi Material menyediakan navigasi dan akses cepat ke tindakan lainnya. Mari kita tambahkan.
Menginstal Panel Samping dan Daftar MDC
Untuk menginstal paket bagi komponen panel samping, jalankan:
npm install @material/drawer @material/list
Menambahkan HTML
Di home.html, ganti "You did it!" dengan markup berikut untuk panel samping dan itemnya:
<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>
Menambahkan CSS
Di home.scss, tambahkan pernyataan impor berikut setelah impor yang ada:
@import "@material/drawer/mdc-drawer";
@import "@material/list/mdc-list";
Di bagian bawah home.scss, tambahkan gaya berikut:
.shrine-logo-drawer {
display: block;
width: 48px;
padding: 40px 0 0;
margin: 0 auto;
fill: currentColor;
}
.shrine-title {
text-align: center;
margin: 5px auto;
}
Menambahkan JavaScript
Kita perlu membuat instance MDC List di dalam panel navigasi untuk navigasi keyboard yang tepat. Buka home.js, yang saat ini kosong, dan tambahkan kode berikut:
import {MDCList} from '@material/list';
new MDCList(document.querySelector('.mdc-list'));
Muat ulang halaman di http://localhost:8080/home.html. Halaman beranda Anda sekarang akan terlihat seperti ini:
Sekarang halaman beranda memiliki panel navigasi persisten yang menampilkan berbagai item navigasi, dengan item pertama aktif.
4. Menambahkan gambar dengan label teks
Setelah aplikasi memiliki beberapa struktur, mari kita susun konten dengan menempatkannya dalam daftar gambar.
Menginstal Daftar Image MDC
Untuk menginstal paket komponen daftar image, jalankan:
npm install @material/image-list
Menambahkan HTML untuk daftar dengan satu item
Mari kita mulai dengan menambahkan daftar gambar di samping panel navigasi. Kita akan memulai daftar dengan menambahkan satu item, yang terdiri dari gambar dan label teks.
Di home.html, tambahkan HTML berikut setelah akhir elemen <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>
Daftar ini menyertakan class tambahan, product-list, yang akan menerapkan gaya kustom, baik dalam tutorial ini maupun di MDC-103.
Menambahkan CSS
Pertama, di home.scss, tambahkan impor untuk gaya komponen daftar gambar setelah impor yang ada:
@import "@material/image-list/mdc-image-list";
Selanjutnya, tambahkan gaya berikut setelah gaya halaman beranda awal:
.product-list {
@include mdc-image-list-standard-columns(4);
overflow: auto;
}
Gaya ini menginstruksikan daftar gambar untuk menampilkan gambar di empat kolom, memastikan bahwa daftar gambar di-scroll secara independen dari panel samping.
Muat ulang halaman. Halaman beranda sekarang akan terlihat seperti ini:
Daftar gambar dimaksudkan untuk menampilkan banyak gambar dalam koleksi, jadi mari tambahkan lebih banyak gambar untuk melihat cara kerja komponen dengan lebih baik.
Di home.html, salin elemen <li> yang ada:
<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>
Kemudian, tempelkan setelah item yang ada (sebelum tag </ul> penutup) 15 kali. Tindakan ini akan menghasilkan total 16 gambar. Jangan khawatir tentang gambar dan judul yang unik; Anda akan mempelajarinya di MDC-103.
Refresh. Sekarang halaman beranda akan terlihat seperti ini:
Daftar gambar menampilkan empat gambar per baris, dan gambar akan disesuaikan secara otomatis dengan ruang layar yang tersedia.
5. Rekap
Situs Anda memiliki alur dasar yang mengarahkan pengguna dari halaman login ke halaman beranda, tempat produk dapat dilihat. Hanya dalam beberapa baris kode, Anda telah menambahkan panel samping dan daftar gambar untuk menampilkan konten. Halaman beranda kini memiliki struktur dan konten dasar.
Langkah berikutnya
Dengan panel samping dan daftar gambar, Anda kini telah menggunakan dua komponen inti Desain Material lagi dari library Web MDC. Anda dapat menjelajahi komponen lainnya dengan mengunjungi Katalog Web MDC.
Meskipun berfungsi sepenuhnya, halaman beranda belum menyatakan merek atau sudut pandang tertentu. Di MDC-103: Penerapan Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis, Anda akan menyesuaikan gaya komponen ini untuk mengekspresikan merek modern yang cerah.