MDL Chips

Represents complex entities in small blocks.

The origin MDL documentation is available at Chips

In FlexJS Chips are represented by classes Chip and ButtonChip and beads which can visually change those components.

• Chip:

  • <mdl:Chip />

  • Properties:

    • text (String)
      Assigns text to Chip

• ButtonChip:

  • <mdl:ButtonChip />

  • Properties:

    • text (String)
      Assigns text to Chip

Beads:

• ContactChip:

  • <mdl:ContactChip /> Defines an MDL chip as a contact style chip

  • Properties:

    • contactText (String)
      Assigns text to ContactChip

• DeletableChip:

  • <mdl:DeletableChip /> Defines an MDL chip with deletable contact icon

• ContactImageChip:

  • <mdl:ContactImageChip />

  • Properties:

    • source (String)
      Source of displayed image

• DeletableLinkChip:

  • <mdl:DeletableLinkChip />

  • Properties:

    • href (String)
      Assigns link to Chip

Snippets

Basic chip and button chip

<mdl:Chip text="Basic Chip" />
<mdl:ButtonChip text="Button Chip" />

Deletable contact chip

<mdl:Chip text="Contact Link Chip">
  <mdl:beads>
    <mdl:ContactImageChip />
    <mdl:DeletableLinkChip href="http://flex.apache.org/"/>
  </mdl:beads>
  <mdl:materialIcon>
    <mdl:MaterialIcon text="{MaterialIconType.CANCEL}"/>
  </mdl:materialIcon>
</mdl:Chip>