Tentang codelab ini
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 membuat 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 membangun 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 dilengkapi dengan npm, pengelola paket JavaScript).
- Kode contoh (akan didownload pada langkah berikutnya)
- Pengetahuan dasar tentang HTML, CSS, dan JavaScript
Bagaimana Anda menilai tingkat pengalaman Anda dengan pengembangan web?
2. Menyiapkan lingkungan pengembangan
Melanjutkan dari MDC-101?
Jika Anda sudah menyelesaikan MDC-101, kode Anda untuk codelab ini seharusnya sudah disiapkan. Langsung 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
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 isi aplikasi dengan beberapa produk. Masukkan nama pengguna dan sandi yang valid, lalu klik tombol "Berikutnya" untuk kembali ke halaman beranda.
3. Menambahkan panel navigasi
Ketika pengguna masuk, beranda akan muncul yang bertuliskan, "Anda berhasil!" Bagus! Namun, sekarang pengguna memerlukan tindakan yang harus dilakukan dan memahami posisi mereka dalam aplikasi. Untuk membantu melakukan hal itu, mari tambahkan navigasi.
Pola navigasi Desain Material menawarkan tingkat kegunaan yang tinggi. Panel navigasi Material menyediakan navigasi dan akses cepat ke tindakan lain. 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 "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.
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, sehingga memastikan 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 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. Ini akan menghasilkan total 16 gambar. Jangan khawatir tentang gambar dan judul unik; Anda akan mendapatkannya
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 dengan beberapa baris kode, Anda menambahkan panel samping dan daftar gambar untuk menyajikan 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.