Material Desig Lite - 徽章

MDL 徽章元件是一個螢幕通知，可以是數字或圖示。通常用於強調專案數量。

MDL 提供一系列 CSS 類，可將各種預定義的視覺和行為增強功能應用於徽章。下表列出了可用的類及其效果。

序號	類名和說明
1	mdl-badge 將元素標識為 MDL 徽章元件。跨度或連結元素必需。
2	mdl-badge--no-background 將開放圓圈效果應用於徽章，並且是可選的。
3	mdl-badge--overlap 使徽章與其容器重疊，並且是可選的。
4	data-badge="value" 將字串值分配給用作屬性的徽章；跨度或連結上必需。

示例

以下示例將幫助您理解如何使用 mdl-badge 類向跨度和連結元素新增通知。

此示例將使用下面給出的 MDL 類。

mdl-badge − 將元素標識為 MDL 徽章元件。
data-badge − 將字串值分配給徽章。可以使用 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>

結果

驗證結果。

列印頁面