Materialize CSS Bagian 2: Shadow, Tombol, Form, Tabs, dan Dropdown

Oleh Admin

anaksmanda.com - Pada tulisan sebelumnya kita sudah berkenalan dengan dasar-dasar framework ini. Sekarang saatnya masuk ke bagian yang lebih praktis, yaitu memakai komponen Materialize CSS untuk membangun tampilan situs web bergaya Material Design tanpa menulis CSS dari nol.

Daftar Isi

  1. Ringkasan Komponen yang Dibahas
  2. Versi Materialize yang Sebaiknya Dipakai
  3. 1. Perataan Vertikal dengan valign-wrapper
  4. 2. Memberi Bayangan dengan z-depth
  5. 3. Membuat Tombol
  6. 4. Menyusun Form
  7. 5. Menampilkan Ikon (Kode Diperbarui)
  8. 6. Membuat Tabs (Kode Diperbaiki)
  9. 7. Gambar yang Bisa Diperbesar dengan Material Box
  10. 8. Menu Dropdown (Sintaks Terbaru)
  11. Tips Merangkai Komponen Menjadi Halaman
  12. Kesalahan yang Sering Terjadi
  13. Pertanyaan yang Sering Diajukan
  14. Kesimpulan

Di bagian 2 ini kalian akan belajar menyusun elemen yang paling sering dipakai: perataan vertikal, bayangan (shadow), tombol, form, ikon, tabs, gambar yang bisa diperbesar (Material Box), serta menu dropdown. Beberapa kode pada versi lama artikel ini sudah tidak berjalan di versi Materialize terbaru, jadi semuanya sudah kami periksa ulang dan perbaiki.

Kalau kalian belum membaca bagian pertama, sebaiknya mulai dari pengenalan framework Materialize agar struktur grid dan cara memasang file-nya lebih mudah dipahami.

Membuat situs web dengan framework Materialize CSS

Membuat tampilan situs web bergaya Material Design dengan Materialize CSS.

Ringkasan Komponen yang Dibahas

KomponenClass utamaPerlu JavaScript?
Perataan vertikalvalign-wrapperTidak
Bayanganz-depth-1 s.d. z-depth-5Tidak
Tombolbtn, btn-floating, btn-flatTidak (efek waves otomatis)
Forminput-fieldHanya untuk beberapa elemen
Ikonmaterial-iconsTidak
Tabstabs, tabYa (M.Tabs)
Material BoxmaterialboxedYa (M.Materialbox)
Dropdowndropdown-triggerYa (M.Dropdown)

Versi Materialize yang Sebaiknya Dipakai

Ada satu hal penting sebelum mulai. Materialize versi resmi terakhir dari pengembang aslinya adalah 1.0.0 yang rilis tahun 2018 dan sejak itu tidak lagi dikembangkan. Pengembangannya kemudian dilanjutkan oleh komunitas melalui organisasi materializecss di GitHub dengan versi 2.x dan paket npm @materializecss/materialize. Dokumentasinya bisa kalian baca di materializeweb.com.

Versi komunitas ini tidak memerlukan jQuery, dan sebagian besar class yang dibahas di sini tetap sama. Untuk proyek baru, pakai versi komunitas tersebut. Cara paling cepat adalah memuatnya lewat CDN jsDelivr seperti contoh berikut.

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2/dist/css/materialize.min.css" rel="stylesheet">
<title>Belajar Materialize</title>
</head>
<body>
<!-- isi halaman di sini -->
<script src="https://cdn.jsdelivr.net/npm/@materializecss/materialize@2/dist/js/materialize.min.js"></script>
</body>
</html>

Penulisan @2 berarti jsDelivr akan mengambil rilis terbaru dari versi mayor 2. Untuk situs produksi, lebih aman mengunci nomor versi lengkap yang tertera di halaman paket npm agar tampilan tidak berubah tiba-tiba.

1. Perataan Vertikal dengan valign-wrapper

Menaruh teks tepat di tengah secara vertikal sering kali merepotkan bila memakai CSS biasa. Materialize menyediakan class valign-wrapper yang memanfaatkan flexbox, sehingga isi di dalamnya otomatis berada di tengah secara vertikal.

<div class="box valign-wrapper">
<h5>Vertical</h5>
</div>

Bungkus elemen yang ingin diratakan, lalu beri tinggi pada pembungkusnya. Tanpa tinggi yang jelas, efeknya tidak akan terlihat.

2. Memberi Bayangan dengan z-depth

Material Design memakai bayangan untuk menunjukkan "kedalaman" sebuah elemen. Di Materialize, kalian cukup menambahkan class z-depth-1 sampai z-depth-5. Semakin besar angkanya, semakin tebal bayangan dan semakin tinggi kesan elemen itu terangkat.

<p class="z-depth-1">z-depth-1</p>
<p class="z-depth-2">z-depth-2</p>
<p class="z-depth-3">z-depth-3</p>
<p class="z-depth-4">z-depth-4</p>
<p class="z-depth-5">z-depth-5</p>

Gunakan bayangan secukupnya. Kartu atau panel biasa cukup memakai level 1 atau 2, sedangkan level 4 dan 5 lebih cocok untuk elemen yang memang perlu menonjol, misalnya kotak dialog.

3. Membuat Tombol

Ada tiga jenis tombol utama: tombol biasa (btn), tombol bulat melayang (btn-floating), dan tombol datar tanpa latar (btn-flat). Tambahkan waves-effect agar muncul efek riak saat tombol diklik.

<a class="waves-effect waves-light btn">Stuff</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud left"></i>button</a>
<a class="waves-effect waves-light btn"><i class="mdi-file-cloud right"></i>button</a>
<a class="btn-floating btn-large waves-effect waves-light red"><i class="mdi-content-add"></i></a>

Ukuran tombol bisa diperbesar dengan btn-large atau diperkecil dengan btn-small. Warnanya mengikuti class warna Materialize, misalnya red atau teal lighten-2.

4. Menyusun Form

Form di Materialize memakai pembungkus input-field dan sistem grid (row serta col). Contoh berikut membuat dua kolom input yang berdampingan di layar lebar.

<div class="row">
  <form class="col s12">
    <div class="row">
      <div class="input-field col s6">
        <input id="first_name" type="text" class="validate">
        <label for="first_name">First Name</label>
      </div>
      <div class="input-field col s6">
        <input id="last_name" type="text" class="validate">
        <label for="last_name">Last Name</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="username" type="text" class="validate">
        <label for="username">Username</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="password" type="password" class="validate">
        <label for="password">Password</label>
      </div>
    </div>
    <div class="row">
      <div class="input-field col s12">
        <input id="email" type="email" class="validate">
        <label for="email">Email</label>
      </div>
    </div>
  </form>
</div>

Pastikan atribut for pada label sama dengan id pada input. Selain berguna untuk animasi label, hal ini juga membantu aksesibilitas karena pembaca layar bisa mengenali label setiap kolom. Komponen seperti select dan datepicker tetap membutuhkan inisialisasi JavaScript.

5. Menampilkan Ikon (Kode Diperbarui)

Versi lama artikel ini memakai class seperti mdi-content-add. Cara itu sudah tidak didukung. Sekarang ikon diambil dari Google Material Icons: muat font-nya di head (sudah ada pada kerangka di atas), lalu tulis nama ikon di dalam tag i.

<i class="material-icons tiny">add</i>
<i class="material-icons small">add</i>
<i class="material-icons medium">add</i>
<i class="material-icons large">add</i>

<!-- ikon di dalam tombol -->
<a class="waves-effect waves-light btn"><i class="material-icons left">cloud</i>Unggah</a>

Daftar nama ikon bisa dicari di situs Google Fonts bagian Icons. Jika blog kalian memakai AMP, ada panduan khusus tentang Material Icons sebagai pengganti Font Awesome.

6. Membuat Tabs (Kode Diperbaiki)

Kode tabs pada versi lama memiliki tag div yang tidak ditutup dengan benar sehingga tampilannya bisa berantakan. Berikut versi yang sudah dirapikan beserta inisialisasinya.

<div class="row">
<div class="col s12">
<ul class="tabs">
<li class="tab col s4"><a class="active" href="#tab1">Profil</a></li>
<li class="tab col s4"><a href="#tab2">Layanan</a></li>
<li class="tab col s4"><a href="#tab3">Kontak</a></li>
</ul>
</div>
<div id="tab1" class="col s12">Isi tab profil.</div>
<div id="tab2" class="col s12">Isi tab layanan.</div>
<div id="tab3" class="col s12">Isi tab kontak.</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function () {
M.Tabs.init(document.querySelectorAll('.tabs'));
});
</script>

Nilai href pada setiap tautan harus sama dengan id panel isinya. Class active menentukan tab mana yang terbuka pertama kali.

7. Gambar yang Bisa Diperbesar dengan Material Box

Material Box membuat gambar membesar dengan animasi halus saat diklik, lalu kembali ke ukuran semula ketika diklik lagi atau saat pengunjung menekan tombol Esc. Ganti alamat gambar dengan gambar milik kalian sendiri.

<img class="materialboxed responsive-img" width="400"
src="gambar/contoh.jpg" alt="Contoh gambar Material Box">

<script>
document.addEventListener('DOMContentLoaded', function () {
M.Materialbox.init(document.querySelectorAll('.materialboxed'));
});
</script>

8. Menu Dropdown (Sintaks Terbaru)

Sintaks lama memakai atribut data-activates dan jQuery. Sejak versi 1.0, atribut yang benar adalah data-target, dan inisialisasinya memakai M.Dropdown.init.

<a class="dropdown-trigger btn" href="#" data-target="menu1">Pilih Menu</a>

<ul id="menu1" class="dropdown-content">
<li><a href="#!">Beranda</a></li>
<li><a href="#!">Artikel</a></li>
<li class="divider" tabindex="-1"></li>
<li><a href="#!">Tentang</a></li>
</ul>

<script>
document.addEventListener('DOMContentLoaded', function () {
M.Dropdown.init(document.querySelectorAll('.dropdown-trigger'), {
coverTrigger: false
});
});
</script>

Opsi coverTrigger: false membuat menu muncul di bawah tombol, bukan menutupinya. Jika kalian memakai banyak komponen sekaligus, M.AutoInit() bisa menginisialisasi semuanya dengan satu baris, meski inisialisasi manual lebih mudah diatur.

Tips Merangkai Komponen Menjadi Halaman

  • Mulai dari kerangka grid (container, row, col), baru isi dengan komponen.
  • Simpan seluruh skrip inisialisasi di satu tempat sebelum tag penutup body.
  • Uji tampilan di layar ponsel; class s, m, dan l menentukan lebar kolom di tiap ukuran layar.
  • Jika ada gaya yang perlu diubah, tulis CSS sendiri di file terpisah agar mudah diperbarui. Dasar-dasarnya bisa kalian pelajari di CSS dasar bagian 1.

Kesalahan yang Sering Terjadi

Sebagian besar masalah pemula dengan Materialize bukan berasal dari CSS, melainkan dari urutan pemuatan file. Skrip inisialisasi harus berjalan setelah materialize.min.js selesai dimuat, itulah sebabnya contoh di atas memakai event DOMContentLoaded. Kesalahan lain yang cukup sering muncul adalah menyalin kode dari tutorial lama yang ditulis untuk versi 0.x, sehingga atribut dan nama class-nya sudah tidak dikenali.

Bila sebuah komponen tidak bekerja, buka console di browser (tekan F12) dan perhatikan pesan galatnya. Pesan seperti "M is not defined" hampir selalu berarti file JavaScript Materialize belum termuat atau alamat CDN-nya salah.

Bagi yang sedang membandingkan pilihan framework, ulasan framework Bootstrap bisa menjadi pembanding. Bootstrap punya komunitas lebih besar, sedangkan Materialize unggul bila kalian memang menginginkan gaya Material Design.

Kunci versi di CDN
Saat situs sudah tayang, ganti @2 pada alamat CDN dengan nomor versi lengkap. Dengan begitu, rilis baru Materialize tidak akan mengubah tampilan situs kalian tanpa diuji terlebih dahulu.

Pertanyaan yang Sering Diajukan

Apakah Materialize CSS masih dikembangkan?
Versi asli 1.0.0 sudah tidak diperbarui sejak 2018. Pengembangan dilanjutkan oleh komunitas lewat versi 2.x dengan paket npm @materializecss/materialize, yang dokumentasinya ada di materializeweb.com.

Apakah Materialize membutuhkan jQuery?
Tidak. Sejak versi 1.0, Materialize memakai JavaScript murni dengan objek global M, misalnya M.Dropdown.init dan M.Tabs.init.

Mengapa dropdown saya tidak muncul?
Penyebab paling umum adalah masih memakai atribut lama data-activates, nilai data-target tidak sama dengan id daftar menu, atau skrip inisialisasi belum dijalankan. Periksa juga apakah file JavaScript Materialize sudah dimuat sebelum skrip inisialisasi.

Bisakah Materialize dipakai di Blogger?
Bisa. Muat CSS dan JavaScript-nya lewat CDN di tema, lalu gunakan class-nya di HTML postingan. Perhatikan agar gaya Materialize tidak bentrok dengan CSS bawaan tema.

Kesimpulan

Dengan komponen bawaan Materialize CSS, kalian bisa membuat halaman yang rapi hanya dengan menambahkan class yang tepat. Bayangan, tombol, form, dan ikon cukup memakai HTML, sedangkan tabs, Material Box, dan dropdown perlu diinisialisasi lewat JavaScript.

Gunakan versi komunitas 2.x untuk proyek baru, hindari sintaks lama seperti data-activates dan mdi-*, lalu kembangkan contoh di atas menjadi halaman utuh sesuai kebutuhan situs kalian.

Rujukan

Komentar

Memuat komentar...

Tulis Komentar

Silakan bertanya atau berbagi pengalaman. Komentar berisi tautan aktif atau promosi akan dihapus.