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 dasar 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 lengkap berisi produk
Komponen Web MDC dalam codelab ini
- Panel samping
- 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-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 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-102/starter
Instal dependensi project
Direktori Anda saat ini harus 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 perintah 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 kita isi aplikasi dengan beberapa produk. Masukkan nama pengguna dan sandi yang valid, lalu klik tombol "Berikutnya" untuk membuka halaman beranda.
Saat pengguna login, halaman beranda akan ditampilkan dengan tulisan "Anda berhasil!" Bagus! Namun, sekarang pengguna memerlukan tindakan yang dapat dilakukan dan pemahaman tentang posisi mereka di aplikasi. Untuk membantu mengatasinya, mari kita 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 Drawer dan Daftar MDC
Untuk menginstal paket komponen panel samping, jalankan:
npm install @material/drawer @material/list
Tambahkan HTML
Di home.html, ganti "You did it!" dengan markup berikut untuk panel geser 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>Tambahkan 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;
}Tambahkan JavaScript
Kita perlu membuat instance MDC List di dalam panel navigasi untuk navigasi keyboard yang tepat. Buka home.js, yang saat ini kosong, lalu 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 yang aktif.
Karena saat ini aplikasi ini memiliki beberapa struktur, mari kita susun konten dengan menempatkannya ke dalam daftar gambar.
Menginstal Daftar Gambar MDC
Untuk menginstal paket komponen daftar gambar, jalankan:
npm install @material/image-list
Tambahkan 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 mencakup class tambahan, product-list, yang akan menerapkan gaya kustom, baik dalam tutorial ini maupun di MDC-103.
Tambahkan 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, sehingga daftar gambar dapat di-scroll secara terpisah dari panel.
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) sebanyak 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 ukuran gambar otomatis disesuaikan agar sesuai dengan ruang layar yang tersedia.
Situs Anda memiliki alur dasar yang mengarahkan pengguna dari halaman login ke halaman beranda, tempat produk dapat dilihat. Hanya dalam beberapa baris kode, Anda menambahkan panel dan daftar gambar untuk menampilkan konten. Halaman beranda kini memiliki struktur dan konten dasar.
Langkah berikutnya
Dengan panel geser dan daftar gambar, kini Anda telah menggunakan dua komponen inti Desain Material lainnya dari library MDC Web. Anda dapat mempelajari lebih banyak komponen dengan membuka Katalog Web MDC.
Meskipun berfungsi sepenuhnya, halaman beranda ini belum menyatakan merek atau sudut pandang tertentu. Dalam MDC-103: Memberi Tema Desain Material dengan Warna, Bentuk, Ketinggian, dan Jenis, Anda akan menyesuaikan gaya komponen ini untuk mengekspresikan merek modern yang cerah.