Material Design Lite Badges - Material Design Lite
Interview Questions
All Tutorials
Job SearchWhat are Material Design Lite Badges?
An MDL badge component is designed to provide onscreen notification in the form of a number or icon. It is used to showcase the number of items.
The MDL provides various CSS classes to apply various predefined visual and behavioral enhancements to the badges. Following table explains the various lasses 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
Below mentioned example displays the use of mdl-badge class to add notifications to span and link elements.
Following MDL classes are used.
- mdl-badge – Determines an element as an MDL badge component.
- data-badge – Adds a string value to badge. Icons can be assigned to it using HTML symbols.
mdl_badges.htm
Result
Verify the result.
