Belajar Materialize #11 : Badges pada Materialize

Belajar Materialize #11 : Badges pada Materialize – Hai sahabat kodingin, sampai ketemu di tutorial ke sebelas ini yang membahas mengenai panduan lengkap belajar materialize dalam pembuatan website.

Pada kesempatan ini saya kana membahas mengenai “cara menggunakan badges” pada framework materialize besutan Google.

Pernahkan kalian tahu tampilan website yang berisi label dengan dalam bentuk kecil dan biasanya terdapat sebuah teks ?

nah, itulah salah satu implementasi penggunaan badges.

Badges pada Materialize

Sebelum menggunakan badges sebaiknya kenali dulu pengertian badges itu apa ?. Badges merupakan salah satu komponen pada materialize yang berfungsi untuk memberikan informasi pendukung.

Badges sendiri biasanya berbentuk label kotak dan didalamnya berisi teks angka, sebagai contoh kita mempunya website yang terdapat banyak kategori, nah di dalam menu kategori terdapat jumlah postingan berdasarkan kategori tersebut.

Badges bisa dibuat menggunakan tag HTML tabel , link maupun heading pada HTML, semuanya tergantung kebutuhan kita.

Komponen badges pada materialize menggunakan class dengan nama .badge.

Sama seperti teks lainnya, di dalam badges kita juga dapat memberikan warna pada teks maupun mengubah ukuran teks tersebut.

Yuk kita bahas cara membuat badge pada materialize….

Cara Menggunakan Badges pada Materialize

Oh iya, badges juga sering digunakan untuk menerapkan fitur notifikasi seperti akun media social facebook , biasanya berupa pemberitahuan.

Seperti pada cuplikan kode diatas, untuk membuat badges dapat menggunakan class badges.

Berikut ini contoh penggunaan badges pada materize.

Perhatikan kode diatas, terdapat 3 badges yang saya implementasikan pada sebuah permalink menuju halaman tertentu, namun saya membuat link yang menuju ke halaman itu sendiri.

Jika sudah, silahakn buka file HTML tersebut di browser anda.

Belajar Materialize #11 : Badges pada Materialize
Cara Menggunakan Badges pada Materialize

Perhatikan gambar diatas, terdapat 4 link, diimana terdapat 3 link yang menggunakan badges dan 1 link tanpa menggunakan badges.

Badges Pada Menu Dropdown

Menu dropdown merupakan sebuah menu dimana jika diklik salah satu link akan memuncul menu yang ada di dalamnya, biasanya digunakan untuk menu di bagian header atau pun tombol button.

Berikut ini contoh badge dengan dropdown.

Perhatikan kode diatas, saya menggunakan tombol button, ketika dilkik buttonya maka akan muncul sebuah daftar yang menampilkan link yang ada badgesnya.

Oh ya untuk menggunakan dropdown pada mterialize harus memanggil script jquery dan mendefinisikan class yang kita gunakan.

Sekarang silahkan buka di halaman browser dan lihat hasilnya.

Belajar Materialize #11 : Badges pada Materialize
Badges Pada Menu Dropdown

Perhatikan gambar diatas, gambar diatas akan tampak ketika di klik tombo yang ada, dan akan menghasilkan 3 link dan 2 badges.

Memberikan Warna Badges

Sebuah badges baik itu menggunakan link maupun heading dapat di berikan warna, yaitu dengan menambah class warna yang ada di materialize.

Berikut ini contoh menggunakan warna pada Badges.

Perhatikan kode diatas, saya menambahkan class untuk warna color yaitu merah dan pink, dimana teksnya juga saya beri class untuk menjadikan warna teks putih.

Dan Lihat Hasilnya.

Belajar Materialize #11 : Badges pada Materialize
Memberikan Warna Badges

Sekarang warna sudah berubah sesutai dengan kode yang saya tuliskan di atas.

Kesimpulan…

Badges di materilize dapat digunakan di Link, Heading maupun tombol button, semuanya tergantung pada kebutuhan anda.

Untuk menggunakan badges menggunakan class dengan nama .bagdes.

Baca Juga…

3 Comments

  1. […] Belajar Materialize #11 : Badges pada Materialize […]

  2. […] Belajar Materialize #11 : Badges pada Materialize […]

  3. […] Belajar Materialize #11 : Badges pada Materialize […]

Leave a Reply