Material Design Lite - Lencana

Komponen lencana MDL adalah pemberitahuan di layar yang bisa berupa angka atau ikon. Biasanya digunakan untuk menekankan jumlah item.

MDL menyediakan berbagai kelas CSS untuk menerapkan berbagai peningkatan visual dan perilaku yang telah ditentukan sebelumnya ke lencana. Tabel berikut mencantumkan kelas yang tersedia dan efeknya.

Sr.No.	Nama & Deskripsi Kelas
1	mdl-badge Mengidentifikasi elemen sebagai komponen lencana MDL. Diperlukan untuk elemen span atau link.
2	mdl-badge--no-background Menerapkan efek lingkaran terbuka ke lencana dan bersifat opsional.
3	mdl-badge--overlap Membuat lencana tumpang tindih dengan penampungnya dan bersifat opsional.
4	data-badge="value" Menetapkan nilai string ke lencana yang digunakan sebagai atribut; dibutuhkan pada span atau link.

Contoh

Contoh berikut akan membantu Anda memahami penggunaan file mdl-badge kelas untuk menambahkan notifikasi ke elemen span dan link.

Kelas MDL yang diberikan di bawah ini akan digunakan dalam contoh ini.

mdl-badge - Mengidentifikasi elemen sebagai komponen lencana MDL.
data-badge- Menetapkan nilai string ke lencana. Ikon dapat ditetapkan menggunakan simbol HTML.

mdl_badges.htm

<html>
   <head>
      <script src = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.min.js">
      </script>
      
      <link rel = "stylesheet" 
         href = "https://storage.googleapis.com/code.getmdl.io/1.0.6/material.indigo-pink.min.css">
      <link rel = "stylesheet" 
         href = "https://fonts.googleapis.com/icon?family=Material+Icons">
      <style>
         body {
            padding: 20px;
            background: #fafafa;
            position: relative;
         }
      </style>
   </head>
   
   <body>
      <span class = "material-icons mdl-badge" data-badge = "1">account_box</span>    
      <span class = "material-icons mdl-badge" data-badge = "★">account_box</span>	
      <span class = "mdl-badge" data-badge = "4">Unread Messages</span>
      <span class = "mdl-badge" data-badge = "⚑">Rating</span>
      <a href = "#" class = "mdl-badge" data-badge = "5">Inbox</a>
   </body>
</html>

Hasil

Verifikasi hasilnya.