Monday, March 6, 2017

Material Design Lite - Badges

An MDL badge component is a onscreen notification which can be a number or icon. It is generally used to emphasize the number of items.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the badges. The below table mentions the available classes and their effects.

S.N.Class Name & Description
1mdl-badge
Identifies element as an MDL badge component. Required for span or link element.
2mdl-badge--no-background
Applies open-circle effect to badge and is optional.
3mdl-badge--overlap
Makes the badge overlap with its container and is optional.
4data-badge="value"
Assigns a string value to badge used as attribute; required on span or link.

Example

The following example showcases the use of mdl-badge class to add notifications to span and link elements.
Here following MDL classes are used.
  1. mdl-badge - Identifies element as an MDL badge component.
  2. data-badge -Assigns a string value to badge. Icons can be assigned to it using HTML symbols.
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>

Result

Verify the result.
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)