Material Design Lite - odznaki

Składnik identyfikatora MDL to powiadomienie ekranowe, które może być liczbą lub ikoną. Zwykle jest używany do podkreślenia liczby elementów.

MDL zapewnia szereg klas CSS do stosowania różnych predefiniowanych ulepszeń wizualnych i behawioralnych na identyfikatorach. Poniższa tabela zawiera listę dostępnych klas i ich skutków.

Sr.No.	Nazwa i opis klasy
1	mdl-badge Identyfikuje element jako komponent identyfikatora MDL. Wymagane w przypadku elementu span lub link.
2	mdl-badge--no-background Nakłada efekt otwartego koła na odznakę i jest opcjonalne.
3	mdl-badge--overlap Sprawia, że znaczek zachodzi na swój pojemnik i jest opcjonalny.
4	data-badge="value" Przypisuje ciąg znaków do identyfikatora używanego jako atrybut; wymagane na span lub link.

Przykład

Poniższy przykład pomoże ci zrozumieć sposób użycia mdl-badge klasa, aby dodać powiadomienia do elementów span i link.

W tym przykładzie zostaną użyte poniższe klasy MDL.

mdl-badge - Identyfikuje element jako komponent identyfikatora MDL.
data-badge- przypisuje do znaczka wartość ciągu. Ikony można przypisać do niego za pomocą symboli 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>

Wynik

Sprawdź wynik.