Material Design Lite - Huy hiệu

Thành phần huy hiệu MDL là một thông báo trên màn hình có thể là một số hoặc một biểu tượng. Nó thường được sử dụng để nhấn mạnh số lượng các mục.

MDL cung cấp một loạt các lớp CSS để áp dụng nhiều cải tiến hình ảnh và hành vi được xác định trước cho các huy hiệu. Bảng sau liệt kê các lớp có sẵn và tác dụng của chúng.

Sr.No.	Tên & Mô tả Lớp học
1	mdl-badge Xác định phần tử là thành phần huy hiệu MDL. Bắt buộc đối với phần tử span hoặc liên kết.
2	mdl-badge--no-background Áp dụng hiệu ứng vòng tròn mở cho huy hiệu và là tùy chọn.
3	mdl-badge--overlap Làm cho huy hiệu chồng lên vùng chứa của nó và là tùy chọn.
4	data-badge="value" Gán giá trị chuỗi cho huy hiệu được sử dụng làm thuộc tính; yêu cầu trên span hoặc liên kết.

Thí dụ

Ví dụ sau sẽ giúp bạn hiểu việc sử dụng mdl-badge lớp để thêm thông báo đến các phần tử span và liên kết.

Các lớp MDL dưới đây sẽ được sử dụng trong ví dụ này.

mdl-badge - Xác định phần tử như một thành phần huy hiệu MDL.
data-badge- Gán giá trị chuỗi cho huy hiệu. Các biểu tượng có thể được gán cho nó bằng các ký hiệu 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>

Kết quả

Xác minh kết quả.