Material Design Lite Badges - Material Design Lite

What 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.

All rights reserved © 2018 Wisdom IT Services India Pvt. Ltd DMCA.com Protection Status

Material Design Lite Topics