Membuat Badges/Notifikasi dengan Menggunakan Materialize CSS

Melanjutkan postingan sebelumnya, pada postingan kali ini masih membahas CSS Framework yaitu Materialize CSS. Pada postingan sebelumnya admin sudah membahas komponen-komponen dari Materialize yaitu Form dan Icon. Ada 11 komponen dari Materialize, salah satu yang akan admin bahas kali ini adalah Badges.

Badges adalah komponen Materialize yang digunakan untuk memberitahu kita bahwa ada pesan baru atau pesan yang belum dibaca. Badges sama seperti halnya Notifikasi atau pemberitahuan.

Ada 3 bentuk Badges yaitu Badges Collections, Badges in Dropdown dan Badges in Navbar. 

1. Badges Collections

Source Code :

<div class="collection">

    <a href="#!" class="collection-item">Noeng<span class="badge">43</span></a>

    <a href="#!" class="collection-item">Any<span class="new badge">11</span></a>

    <a href="#!" class="collection-item">Widiya</a>

 </div>

Hasilnya :

2. Badges in Dropdown

Source Code :

<ul id="dropdown2" class="dropdown-content">

    <li><a href="#!">Noeng<span class="badge">54</span></a></li>

    <li><a href="#!">Any<span class="new badge">22</span></a></li>

    <li><a href="#!">Pak Cipto</a></li>

</ul>

<a class="btn dropdown-button" href="#!" data-activates="dropdown2">Dropdown<i class="mdi-navigation-arrow-drop-down right"></i></a>

Hasilnya :

2. Badges in Navbar

Source Code :

<nav>

  <div class="nav-wrapper">

    <a href="" class="brand-logo">Vendidit Blog</a>

    <ul id="nav-mobile" class="right hide-on-med-and-down">

      <li><a href="">Noeng</a></li>

      <li><a href="">Any <span class="new badge">99</span></a></li>

      <li><a href="">Pak Cipto</a></li>

    </ul>

Hasilnya :

Keterangan :

Untuk memanggil class dari badges menggunakan class="collection-item" dan <span class="badge">, untuk membuat notifikasi pesan baru yang masuk <span class="new badge">

Sekian postingan Membuat Badges/Notifikasi dengan Menggunakan Materialize CSS. Semoga bermanfaat dan terimakasih