Material Design Lite-배지

MDL 배지 구성 요소는 숫자 또는 아이콘이 될 수있는 화면 알림입니다. 일반적으로 항목 수를 강조하는 데 사용됩니다.

MDL은 다양한 CSS 클래스를 제공하여 미리 정의 된 다양한 시각적 및 동작 향상을 배지에 적용합니다. 다음 표에는 사용 가능한 클래스와 그 효과가 나열되어 있습니다.

Sr. 아니.	클래스 이름 및 설명
1	mdl-badge 요소를 MDL 배지 구성 요소로 식별합니다. 스팬 또는 링크 요소에 필요합니다.
2	mdl-badge--no-background 배지에 열린 원 효과를 적용하며 선택 사항입니다.
삼	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>

결과

결과를 확인하십시오.