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.
Here following MDL classes are used.
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 |
|---|---|
| 1 | mdl-badge Identifies element as an MDL badge component. Required for span or link element. |
| 2 | mdl-badge--no-background Applies open-circle effect to badge and is optional. |
| 3 | mdl-badge--overlap Makes the badge overlap with its container and is optional. |
| 4 | data-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.
- mdl-badge - Identifies element as an MDL badge component.
- data-badge -Assigns a string value to badge. Icons can be assigned to it using HTML symbols.
<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>
No comments:
Post a Comment