MDL Badges

A badge is a small status descriptors for UI elements.

The origin MDL documentation is available at Badges

In FlexJS the Badge component is implemented as a bead which could be applied to some basic components.

Documentation

---

• Bead:

  • <mdl:Badge/>

  • Properties:

    • dataBadge (Number)
      Assigns string value to badge
    • noBackground (Number)
      Applies open-circle effect to badge
    • overlap (Number)
      Make the badge overlap with its container

Snippets

A badge inside a link

<js:A text="This link contains a badge." href="http://flex.apache.org">
  <js:beads>
    <mdl:Badge dataBadge="1"/>
  </js:beads>
</js:A>

A badge inside a link with no badge background color

<js:A text="This badge has no background color." href="http://flex.apache.org">
  <js:beads>
    <mdl:Badge dataBadge="5" noBackground="true"/>
  </js:beads>
</js:A>

Examples

To be continued...

Live Demo