Komponen Material (MDC) membantu developer menerapkan Desain Material. Dibuat oleh tim engineer dan desainer UX di Google, MMD 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 membuat UI halaman login: kolom dan tombol teks. Sekarang, kita akan memperluasnya dengan menambahkan navigasi, struktur, dan data.
Yang akan Anda build
Dalam codelab ini, Anda akan membuat 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
- Versi terbaru Node.js (yang dipaketkan dengan npm, pengelola paket JavaScript).
- Kode contoh (untuk didownload di langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Bagaimana Anda menilai tingkat pengalaman Anda menggunakan pengembangan web?
Melanjutkan dari MDC-101?
Jika Anda sudah menyelesaikan MDC-101, kode Anda untuk codelab ini seharusnya sudah disiapkan. Langsung ke langkah 3: Menambahkan 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
Menginstal 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
Dalam direktori yang sama, jalankan ini:
npm start
webpack-dev-server akan dimulai. Arahkan browser 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 beranda.
Saat pengguna login, akan muncul halaman beranda yang menyatakan, "Anda melakukannya!" Kerja bagus. Namun, sekarang pengguna perlu melakukan tindakan dan mengetahui lokasi mereka dalam 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 Laci dan Daftar MDC
Untuk menginstal paket untuk komponen panel samping, jalankan:
npm install @material/drawer @material/list
Menambahkan HTML
Di home.html, ganti "Anda berhasil!" 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 Daftar MDC 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.
Setelah aplikasi memiliki beberapa struktur, mari kita atur konten dengan menempatkannya dalam daftar gambar.
Menginstal Daftar Gambar MDC
Untuk menginstal paket untuk komponen daftar gambar, 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 elemen <aside> berakhir:
<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, dalam tutorial ini dan 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 memerintahkan daftar gambar untuk menampilkan gambar di empat kolom, memastikan bahwa daftar gambar di-scroll secara terpisah dari panel samping.
Muat ulang halaman. Halaman beranda sekarang akan terlihat seperti ini:
Daftar gambar dimaksudkan untuk menampilkan banyak gambar dalam koleksi, jadi mari kita 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 mendapatkannya di MDC-103.
Muat ulang. Sekarang halaman beranda akan terlihat seperti ini:
Daftar gambar menampilkan empat gambar per baris, dan gambar akan otomatis disesuaikan 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 telah menambahkan panel samping dan daftar gambar untuk menyajikan konten. Beranda sekarang memiliki struktur dan konten dasar.
Langkah berikutnya
Dengan panel samping dan daftar gambar, sekarang Anda menggunakan dua komponen inti Desain Material lagi dari pustaka Web MDC! Anda dapat menjelajahi komponen lainnya dengan mengunjungi Katalog Web MDC.
Meskipun berfungsi sepenuhnya, halaman beranda 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.