MDL Cards

Self-contained pieces of paper with data.

The origin MDL documentation is available at Cards

In FlexJS Card is a user interface element representing a virtual piece of paper that contains related data - that are all represents by separate components.

• Card:

  • <mdl:Card />

  • Properties:

    • shadow (Number)
      Assigns variable shadow depths (2, 3, 4, 6, 8, or 16) to card

• CardTitleText:

  • <mdl:CardSupportingText />

  • Properties:

    • text (String)
      Assigns appropriate text characteristics to card title

• CardInner:

  • Base class for all Card inner containers.

  • Properties:

    • border (Boolean)
      Adds a border to the card section that it's applied to
    • expand (Boolean)
      Makes the container grows to all available space.

Classes extended CardInner:

• CardTitle:

  • <mdl:CardTitle />

• CardSupportingText:

  • <mdl:CardSupportingText />

• CardActions:

  • <mdl:CardActions />

• CardMedia:

  • <mdl:CardMedia />

• CardMenu:

  • <mdl:CardMenu />

Snippets

<mdl:Card id="mycard" shadow="2">
  <mdl:CardTitle>
    <mdl:CardTitleText text="Welcome"/>
      </mdl:CardTitle>
      <mdl:CardSupportingText>
        <mdl:beads>
          <js:InnerHTML>
            <![CDATA[Lorem ipsum dolor sit <b>amet</b>, consectetur.]]>
          </js:InnerHTML>
        </mdl:beads>
      </mdl:CardSupportingText>
      <mdl:CardActions border="true">
        <mdl:Button text="Get Started" ripple="true" colored="true"/>
      </mdl:CardActions>
      <mdl:CardMenu>
        <mdl:Button icon="true" ripple="true">
          <mdl:materialIcon>
            <mdl:MaterialIcon text="{MaterialIconType.SHARE}"/>
          </mdl:materialIcon>
        </mdl:Button>
      </mdl:CardMenu>
  </mdl:Card>