WebComponent-MDL Components linkGitHub
COMPONENTS
WebComponent-MDL is a set of Custom HTML Components for [Material Design Lite](http://www.getmdl.io), often called "MDL", a library of vanilla components maintained by Google. The current implementation of WebComponent-MDL (v0.x) uses the entire MDL library provided by Google. This includes both the MDL CSS. Therefore, for you to use the library, you have to also require the original MDL files. And we suggest you to use the files we provide in the `/extra` directory of the repository.

Badges

Small status descriptors for UI elements.

Demo

mood face 
<mdl-badge text="6" no-background></mdl-badge>
<mdl-badge text="♥"></mdl-badge>
<mdl-badge text="♥" overlap>
  <mdl-icon>mood</mdl-icon>
</mdl-badge>
<mdl-badge text="♥" no-background>
  <mdl-icon>face</mdl-icon>
</mdl-badge>

Configuration options

Attribute Effect Remarks
text Assign string value to badge Required
overlap Makes the badge overlaps its container Optional
no-background Removes the background of the badge Optional

Buttons

Variations on Material Design buttons.

Demo

Go To Baidu Go To Google 
<mdl-button
  href="http://www.baidu.com/"
  target="_blank"
  onclick="console.log('clicked baidu');"
  ripple raised primary>
  Go To Baidu
</mdl-button>
<mdl-button
  href="https://google.ca"
  target="_self"
  onclick="alert('clicked google');"
  ripple raised accent>
  Go To Google
</mdl-button>

<mdl-icon-button
  onclick="console.log('icon google');"
  name="mood"
  ripple raised accent>
</mdl-icon-button>

Configuration options

Attribute Type Effect Remarks
href String Same as a tag Optional
target String Same as a tag Optional
onclick Function Same as a tag Optional
accent Boolean Applies "accent" colors Optional
colored Boolean Applies "colored" colors Optional
name String Set the icon name" Optional, works only with "IconButton"
primary Boolean Applies "primary" colors Optional
raised Boolean Applies "raised" button style Optional, doesn\'t work with "FABButton"
ripple Boolean Applies "ripple" click effect Optional

Cards

Self-contained pieces of paper with data.

Demo

Welcom to FIEOSA ! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis pellentesque lacus eleifend lacinia... Get Started share 
<!-- Wide card with share menu button -->
<style>
  .demo-card-wide.mdl-card {
    width: 512px;
  }
  .demo-card-wide mdl-card-title {
    height: 176px;
    background: url('../assets/welcome_card.jpg');
  }
  .demo-card-wide mdl-card-title h2 {
    color: #fff;
  }
  .demo-card-wide mdl-card-title a {
    display: flex;
    align-self: flex-end;
    line-height: 32px;
  }
  .demo-card-wide > .mdl-card__menu {
    color: #fff;
  }
  .demo-card-wide mdl-card-title-text {
    color: white;
  }
</style>
<mdl-card class="demo-card-wide" shadow="4">
  <mdl-card-title>
    <mdl-card-title-text>
      Welcom to&nbsp;<a href="https://github.com/FIEOSA">FIEOSA</a>&nbsp;!
    </mdl-card-title-text>
  </mdl-card-title>
  <mdl-card-text>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Mauris sagittis pellentesque lacus eleifend lacinia...
  </mdl-card-text>
  <mdl-card-actions border>
    <mdl-button colored ripple>
      Get Started
    </mdl-icon-button>
  </mdl-card-actions>
  <mdl-card-menu>
    <mdl-icon-button ripple>
      <mdl-icon>share</mdl-icon>
    </mdl-icon-button>
  </mdl-card-menu>

</mdl-card>

Featured event:
May 24, 2016
7-11pm

Add to Calendar event 
<!-- Wide card with share menu button -->
<style>
  .demo-card-event.mdl-card {
    width: 256px;
    height: 256px;
    background: #3E4EB8;
  }
  .demo-card-event > mdl-card-actions {
    border-color: rgba(255, 255, 255, 0.2);
  }
  .demo-card-event > mdl-card-title {
    align-items: flex-start;
  }
  .demo-card-event > mdl-card-title > h4 {
    color: #fff;
    margin-top: 0;
  }
  .demo-card-event > mdl-card-actions {
    display: flex;
    box-sizing:border-box;
    align-items: center;
  }
  .demo-card-event > mdl-card-actions > mdl-icon {
    padding-right: 10px;
  }
  .demo-card-event > mdl-card-title,
  .demo-card-event > mdl-card-actions,
  .demo-card-event > mdl-card-actions > mdl-button {
    color: #fff;
  }
</style>
<mdl-card class="demo-card-event" shadow="2">
  <mdl-card-title expand>
    <h4>
      Featured event:<br>
      May 24, 2016<br>
      7-11pm
    </h4>
  </mdl-card-title>
  <mdl-card-actions border>
    <mdl-button ripple>
      Add to Calendar
    </mdl-button>
    <mdl-spacer></mdl-spacer>
    <mdl-icon>
      event
    </mdl-icon>
  </mdl-card-actions>
</mdl-card>

Configuration options

Element Attribute Type Effect Remarks
mdl-card shadow Number Defines the shadow depth Optional, Default 0. Must be between 0 and 24
mdl-title expand Boolean Defines title to expand Optional, Default false
mdl-card-actions border Boolean Defines actions has a line border on Top Optional, Default false

Chips

Represents complex entities in small blocks.

Demo

Basic Chip Deletable Chip cancel Button Chip 
<!-- Basic Chip -->
<mdl-chip>
    <span class="mdl-chip__text">Basic Chip</span>
</mdl-chip>

<!-- Deletable Chip -->
<mdl-chip deletable>
  <mdl-chip-text>Deletable Chip</mdl-chip-text>
  <mdl-chip-action>
    <mdl-icon>cancel</mdl-icon>
  </mdl-chip-action>
</mdl-chip>

<!-- Button Chip -->
<mdl-chip tabindex="0">
  <mdl-chip-text>Button Chip</mdl-chip-text>
</mdl-chip>
A Contact Chip Deletable Contact Chip cancel 
<!-- Contact Chip -->
<mdl-chip>
  <mdl-chip-contact class="mdl-color--teal mdl-color-text--white">A</mdl-chip-contact>
  <mdl-chip-text>Contact Chip</mdl-chip-text>
</mdl-chip>

<!-- Deletable Contact Chip -->
<mdl-chip deletable>
  <mdl-chip-contact style="background: url('../assets/chip_contact.jpg') 0 0 / cover"></mdl-chip-contact>
  <mdl-chip-text>Deletable Contact Chip</mdl-chip-text>
  <mdl-chip-action>
    <mdl-icon>cancel</mdl-icon>
  </mdl-chip-action>
</mdl-chip>

Configuration options

Element Attribute Type Effect Remarks
mdl-chip deletable Boolean Set when delete button exists Optional
mdl-chip tabindex String If you need interactivity, set tabindex to any string Optional
mdl-chip-contact
mdl-chip-text
mdl-chip-action

Dialogs

Modal windows for dedicated user input.

Note: Dialogs use the HTML <dialog> element, which currently has very limited cross-browser support. To ensure support across all modern browsers, please consider using a polyfill or creating your own. There is no polyfill included with MDL.

Demo

Show Dialog

Allow data collection?

Allowing us to collect data will let us get you the information you want faster.

Disagree Agree 
<mdl-button ripple raised primary onclick="showDialog()">Show Dialog</mdl-button>
<mdl-dialog>
  <mdl-dialog-title>
    <h4>Allow data collection?</h4>
  </mdl-dialog-title>
  <mdl-dialog-content>
    <p>
      Allowing us to collect data will let us get you the information you want faster.
    </p>
  </mdl-dialog-content>
  <mdl-dialog-actions>
    <mdl-button class="close">Disagree</mdl-button>
    <mdl-button primary raised>Agree</mdl-button>
  </mdl-dialog-actions>
</mdl-dialog>

<script>
  function showDialog() {
    var dialog = document.querySelector('mdl-dialog');
    dialog.open = true;
    dialog.querySelector('.close').addEventListener('click', function() {
      dialog.open = false;
    });
  }
</script>

Configuration options

Element Attribute Type Effect Remarks
mdl-dialog open Boolean Set the open state of the dialog Optional
mdl-dialog-title
mdl-dialog-content
mdl-dialog-actions full-width Boolean Apply the full-width effect to all children of dialog actions Optional

Layout

Building blocks for constructing a page layout.

Navigation layouts

Demo

Title Link1 Link2 Link3 Link4 Title Link Link Link Link

content

content

content

content

content

content

content

content

<mdl-layout fixed-drawer>

  <mdl-header style="background-color: #3F51B5;">
    <mdl-header-row>
      <span class="mdl-layout-title">Title</span>
      <mdl-spacer></mdl-spacer>
      <mdl-navigation>
        <a href="">Link1</a>
        <a href="">Link2</a>
        <a href="">Link3</a>
        <a href="">Link4</a>
      </mdl-navigation>
      </mdl-header-row>
  </mdl-header>

  <mdl-drawer>
    <span class="mdl-layout-title">Title</span>
    <mdl-navigation>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
      <a href="">Link</a>
    </mdl-navigation>
  </mdl-drawer>
  <mdl-content>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
    <p>content</p>
  <mdl-content>
</mdl-layout>

Configuration options

Attribute Effect Remarks
fixed-header Fixed header fixed to screen Optional
fixed-drawer Fixed drawer fixed to screen Optional
fixed-tabs Fixed tabs fixed to screen Optional

Grid

Demo

1 1 1 1 1 1 1 1 1 1 1 1 4 4 4 6 4 2 6 (8 tablet) 4 (6 tablet) 2 (4 phone) 
<mdl-grid>
    <mdl-cell shadow="2" col="1">1</mdl-cell>
    <mdl-cell shadow="3" col="1">1</mdl-cell>
    <mdl-cell shadow="4" col="1">1</mdl-cell>
    <mdl-cell shadow="6" col="1">1</mdl-cell>
    <mdl-cell shadow="8" col="1">1</mdl-cell>
    <mdl-cell shadow="16" col="1">1</mdl-cell>
    <mdl-cell shadow="24" col="1">1</mdl-cell>
    <mdl-cell shadow="16" col="1">1</mdl-cell>
    <mdl-cell shadow="8" col="1">1</mdl-cell>
    <mdl-cell shadow="4" col="1">1</mdl-cell>
    <mdl-cell shadow="3" col="1">1</mdl-cell>
    <mdl-cell shadow="2" col="1">1</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell col="4">4</mdl-cell>
    <mdl-cell col="4">4</mdl-cell>
    <mdl-cell col="4">4</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell col="6">6</mdl-cell>
    <mdl-cell col="4">4</mdl-cell>
    <mdl-cell col="2">2</mdl-cell>
</mdl-grid>
<mdl-grid>
    <mdl-cell col="6" tablet="8">6 (8 tablet)</mdl-cell>
    <mdl-cell col="4" tablet="6">4 (6 tablet)</mdl-cell>
    <mdl-cell col="2" phone="4">2 (4 phone)</mdl-cell>
</mdl-grid>

Configuration options

Element Attribute Type Effect Remarks
mdl-grid no-spacing Boolean Removes the margins between the cells. Optional
mdl-grid shadow Number Defines the shadow depth Optional, Default 0. Must be between 0 and 6
mdl-cell align String[top, middle, bottom, stretch] Set the cell alignment Optional
mdl-cell col Number[1..12] Set the column size Required
mdl-cell hide-desktop Boolean Hide the cell in desktop mode Optional
mdl-cell hide-phone Boolean Hide the cell in phone mode Optional
mdl-cell hide-tablet Boolean Hide the cell in tablet mode Optional
mdl-cell offset Number[1..7] Adds N columns of whitespace before the cell Optional
mdl-cell offset-desktop Number[1..7] Adds N columns of whitespace before the cell in desktop mode Optional
mdl-cell offset-phone Number[1..7] Adds N columns of whitespace before the cell in phone mode Optional
mdl-cell offset-tablet Number[1..7] Adds N columns of whitespace before the cell in tablet mode Optional
mdl-cell phone Number[1..12] Set the column size in phone mode Optional
mdl-cell tablet Number[1..12] Set the column size in tablet mode Optional
mdl-cell shadow Number Defines the shadow depth Optional, Default 0. Must be between 0 and 6

Tabs

Demo

Starks Lannisters Targaryens
  • Eddard
  • Catelyn
  • Robb
  • Sansa
  • Brandon
  • Arya
  • Rickon
  • Tywin
  • Cersei
  • Jamie
  • Tyrion
  • Viserys
  • Daenerys
 
<mdl-tabs ripple>
  <mdl-tab-bar>
    <mdl-tab href="#starks-panel" active>Starks</mdl-tab>
    <mdl-tab href="#lannisters-panel">Lannisters</mdl-tab>
    <mdl-tab href="#targaryens-panel">Targaryens</mdl-tab>
  </mdl-tab-bar>

  <mdl-tab-panel id="starks-panel" active>
    <ul>
      <li>Eddard</li>
      <li>Catelyn</li>
      <li>Robb</li>
      <li>Sansa</li>
      <li>Brandon</li>
      <li>Arya</li>
      <li>Rickon</li>
    </ul>
  </mdl-tab-panel>
  <mdl-tab-panel id="lannisters-panel">
    <ul>
      <li>Tywin</li>
      <li>Cersei</li>
      <li>Jamie</li>
      <li>Tyrion</li>
    </ul>
  </mdl-tab-panel>
  <mdl-tab-panel id="targaryens-panel">
    <ul>
      <li>Viserys</li>
      <li>Daenerys</li>
    </ul>
  </mdl-tab-panel>
</mdl-tabs>

Configuration options

Element Attribute Type Effect Remarks
mdl-tabs ripple Boolean Applies ripples effect on tabs Optional

Footer

Demo

About Terms Partners Updates Specs Tools Resources How it works Patterns Usage Products Contracts Questions Answers Contact Us Title Help Privacy & Terms 
<mdl-footer size="mega">
  <mdl-footer-section type="middle">
    <mdl-footer-drop-down title="Features">
      <mdl-footer-link-list>
        <a href="#">About</a>
        <a href="#">Terms</a>
        <a href="#">Partners</a>
        <a href="#">Updates</a>
      </mdl-footer-link-list>
    </mdl-footer-drop-down>
    <mdl-footer-drop-down title="Details">
      <mdl-footer-link-list>
        <a href="#">Specs</a>
        <a href="#">Tools</a>
        <a href="#">Resources</a>
      </mdl-footer-link-list>
    </mdl-footer-drop-down>
    <mdl-footer-drop-down title="Technology">
      <mdl-footer-link-list>
        <a href="#">How it works</a>
        <a href="#">Patterns</a>
        <a href="#">Usage</a>
        <a href="#">Products</a>
        <a href="#">Contracts</a>
      </mdl-footer-link-list>
    </mdl-footer-drop-down>
    <mdl-footer-drop-down title="FAQ">
      <mdl-footer-link-list>
        <a href="#">Questions</a>
        <a href="#">Answers</a>
        <a href="#">Contact Us</a>
      </mdl-footer-link-list>
    </mdl-footer-drop-down>
  </mdl-footer-section>
  <mdl-footer-section type="bottom">
    <mdl-logo>Title</mdl-logo>
    <mdl-footer-link-list>
      <a href="#">Help</a>
      <a href="#">Privacy & Terms</a>
    </mdl-footer-link-list>
  </mdl-footer-section>
</mdl-footer>

Configuration options

Element Attribute Type Effect Remarks
mdl-footer size String (mini, mega) Set the size of the footer Optional, default "mega"
mdl-footer-section type String (top, middle, bottom, left, right) Set the section type Optional, default left
mdl-footer-drop-down title String Set the "logo" name Required
mdl-logo

Lists

Customizable scrollable lists.

Demo

Bryan Cranston Aaron Paul Bob Odenkirk 
<!-- Simple list -->
<style>
.demo-list-action {
  width: 300px;
}
</style>

<mdl-list class="demo-list-action">
  <mdl-list-item>
    <mdl-list-item-content>
      Bryan Cranston
    </mdl-list-item-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      Aaron Paul
    </mdl-list-item-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      Bob Odenkirk
    </mdl-list-item-content>
  </mdl-list-item>
</mdl-list>
person Bryan Cranston person Aaron Paul person Bob Odenkirk 
<!-- Icon List -->
<style>
.demo-list-action {
  width: 300px;
}
</style>

<mdl-list class="demo-list-action">
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar>person</mdl-list-item-avatar>
      Bryan Cranston
    </mdl-list-item-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar>person</mdl-list-item-avatar>
      Aaron Paul
    </mdl-list-item-content>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar>person</mdl-list-item-avatar>
      Bob Odenkirk
    </mdl-list-item-content>
  </mdl-list-item>
</mdl-list>
person Bryan Cranston star person Aaron Paul star person Bob Odenkirk star 
<!-- List items with avatar and action -->
<style>
.demo-list-action {
  width: 300px;
}
</style>

<mdl-list class="demo-list-action">
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bryan Cranston</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Aaron Paul</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bob Odenkirk</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
</mdl-list>
person Bryan Cranston person Aaron Paul person Bob Odenkirk 
<!-- List with avatar and controls -->
<style>
.demo-list-control {
  width: 300px;
}
</style>

<mdl-list class="demo-list-control">
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bryan Cranston</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <mdl-switch checked></mdl-switch>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Aaron Paul</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <mdl-switch></mdl-switch>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bob Odenkirk</span>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <mdl-switch></mdl-switch>
    </mdl-list-item-action>
  </mdl-list-item>
</mdl-list>
person Bryan Cranston 62 Episodes star person Aaron Paul 62 Episodes star person Bob Odenkirk 62 Episodes star 
<!-- List with avatar and controls -->
<style>
.demo-list-two {
  width: 300px;
}
</style>

<mdl-list class="demo-list-two">
  <mdl-list-item two-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bryan Cranston</span>
      <mdl-list-item-subtitle>62 Episodes</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action info="Actor">
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item two-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Aaron Paul</span>
      <mdl-list-item-subtitle>62 Episodes</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action info="Actor">
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item two-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bob Odenkirk</span>
      <mdl-list-item-subtitle>62 Episodes</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action info="Actor">
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
</mdl-list>
person Bryan Cranston Bryan Cranston played the role of Walter in Breaking Bad. He is also known for playing Hal in Malcom in the Middle. star person Aaron Paul Aaron Paul played the role of Jesse in Breaking Bad. He also featured in the "Need For Speed" Movie. star person Bob Odenkirk Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the character, Bob stars in his own show now, called "Better Call Saul". star 
<!-- List with avatar and controls -->
<style>
.demo-list-three {
  width: 650px;
}
</style>

<mdl-list class="demo-list-three">
  <mdl-list-item three-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bryan Cranston</span>
      <mdl-list-item-subtitle large>Bryan Cranston played the role of Walter in Breaking Bad. He is also known
        for playing Hal in Malcom in the Middle.</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item three-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Aaron Paul</span>
      <mdl-list-item-subtitle large>Aaron Paul played the role of Jesse in Breaking Bad. He also featured in
        the "Need For Speed" Movie.</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
  <mdl-list-item three-line>
    <mdl-list-item-content>
      <mdl-list-item-avatar large>person</mdl-list-item-avatar>
      <span>Bob Odenkirk</span>
      <mdl-list-item-subtitle large>Bob Odinkrik played the role of Saul in Breaking Bad. Due to public fondness for the
        character, Bob stars in his own show now, called "Better Call Saul".</mdl-list-item-subtitle>
    </mdl-list-item-content>
    <mdl-list-item-action>
      <a href="#"><mdl-icon>star</mdl-icon></a>
    </mdl-list-item-action>
  </mdl-list-item>
</mdl-list>

Configuration options

Element Attribute Type Effect Remarks
mdl-list
mdl-list-item-content
mdl-list-item two-line Boolean Set item to have 2 lines Optional. Cannot be set alongside threeline
mdl-list-item three-line Boolean Set item to have 3 lines Optional. Cannot be set alongside twoLine
mdl-list-item-action info string Set a small header above the action Optional
mdl-list-item-avatar large Boolean Larger size Optional
mdl-list-item-subtitle large Boolean Larger size Optional

Loading

Indicate loading and progress states.

Progress bar

Demo

<!-- Simple Progress Bar -->
<mdl-progress progress="44">
</mdl-progress>

<!-- Progress Bar with Indeterminate Progress -->
<mdl-progress indeterminate>
</mdl-progress>

<!-- Progress Bar with Buffering -->
<mdl-progress progress="33" buffer="87">
</mdl-progress>

Configuration options

Attribute Type Effect Remarks
buffer Number Specify the buffer Optional
indeterminate Boolean Set as indeterminate Optional
progress Number Specify the progress value Optional

Spinner

Demo

<!-- Simple spinner -->
<mdl-spinner>
</mdl-spinner>

<!-- Single color spinner -->
<mdl-spinner single-color>
</mdl-spinner>

Configuration options

Attribute Type Effect Remarks
single-color Boolean Use the primary color instead of a multi color spinner Optional

Menus

Lists of clickable actions.

Demo

Some Action Another Action Disabled Action Yet Another Action 
<!-- Lower left -->
<div style="position: relative;">
  <mdl-icon-button name="more_vert" id="demo-menu-lower-left"></mdl-icon-button>
  <mdl-menu target="demo-menu-lower-left">
    <mdl-menu-item>Some Action</mdl-menu-item>
    <mdl-menu-item>Another Action</mdl-menu-item>
    <mdl-menu-item disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>
</div>
Some Action Another Action Disabled Action Yet Another Action 
<!-- Lower right -->
<div style="position: relative;">
  <mdl-icon-button name="more_vert" id="demo-menu-lower-right"></mdl-icon-button>
  <mdl-menu target="demo-menu-lower-right" align="right">
    <mdl-menu-item>Some Action</mdl-menu-item>
    <mdl-menu-item>Another Action</mdl-menu-item>
    <mdl-menu-item disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>
</div>
Some Action Another Action Disabled Action Yet Another Action 
<!-- Top left -->
<div style="position: relative;">
  <mdl-icon-button name="more_vert" id="demo-menu-top-left"></mdl-icon-button>
  <mdl-menu target="demo-menu-top-left" valign="top">
    <mdl-menu-item>Some Action</mdl-menu-item>
    <mdl-menu-item>Another Action</mdl-menu-item>
    <mdl-menu-item disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>
</div>
Some Action Another Action Disabled Action Yet Another Action 
<!-- Top right -->
<div style="position: relative;">
  <mdl-icon-button name="more_vert" id="demo-menu-top-right"></mdl-icon-button>
  <mdl-menu target="demo-menu-top-right" valign="top" align="right">
    <mdl-menu-item>Some Action</mdl-menu-item>
    <mdl-menu-item>Another Action</mdl-menu-item>
    <mdl-menu-item disabled>Disabled Action</mdl-menu-item>
    <mdl-menu-item>Yet Another Action</mdl-menu-item>
  </mdl-menu>
</div>

Configuration options

Element Attribute Type Effect Remarks
mdl-menu align String (left, right) Set the horizontal alignment Optional, default "left"
mdl-menu ripple Boolean Apply the ripple effect Optional
mdl-menu target String ID of the targeted element. A click on the targeted element will open the menu Required
mdl-menu valign String (top, bottom) Set the vertical alignment Optional, default "bottom"

Sliders

Selecting a value out of a range.

Demo

<mdl-slider id="test_slider" onchange="alert(event.target.value);" min="0" max="100" value="0"></mdl-slider>
<mdl-slider min="0" max="100" value="25"></mdl-slider>

Configuration options

Attribute Type Effect Remarks
max Number Set the maximum value Required
min Number Set the minimum value Required
onchange Function Callback taking 1 parameter, the Change Event. New value retrivable via event.target.value Required when value is provided
value Number Set the initial/current value Optional

Snackbar

Transient popup notifications.

Demo

Show 
<mdl-button
  onclick="snackbarTest();"
  ripple raised primary>
  Show
</mdl-button>
<mdl-snackbar
  timeout="2500"
  onaction="alert('UNDO')"
  message="My message"
  action-text="UNDO">
</mdl-snackbar>
<script>
function snackbarTest() {
  var snacks = document.getElementsByTagName('mdl-snackbar');
  snacks[0].active = true;
}
</script>

Configuration options

Attribute Type Effect Remarks
message String Specify the message to show. Show textContent If not set Optional
action-text String Specify the label of the action button Optional
active Boolean Set the snackbar visible Required. Should be false when mounting the component
onaction Function Function to call when the action button is clicked Optional
timeout Number Defines the time (in ms) to show the snackbar Optional. Default 2750

Toggles

Choose between states.

Checkbox

Demo

<mdl-checkbox label="Checkbox"></mdl-checkbox>
<mdl-checkbox checked label="Checkbox"></mdl-checkbox>
<mdl-checkbox disabled label="Checkbox"></mdl-checkbox>

Configuration options

Attribute Type Effect Remarks
label String Defines the label text Optional
checked Boolean Defines the checkbox as "checked" Optional
disabled Boolean Defines the checkbox as "disabled" Optional
ripple Boolean Applies the ripple effect Optional
onchange Function Callback to receive the change event Optional

Radio button

Demo

<mdl-radio name="options" value="1" ripple label="First"></mdl-radio>
<mdl-radio name="options" value="2" ripple checked label="Second"></mdl-radio>
<mdl-radio name="options" value="3" ripple disabled label="Third"></mdl-radio>

Configuration options

Element Attribute Type Effect Remarks
mdl-radio label String Defines the label of the radio Optional
mdl-radio name String Defines the name of the radio group Required
mdl-radio disabled Boolean Set as disabled Optional
mdl-radio ripple Boolean Applies the ripple effect Optional
mdl-radio value String or Number Defines the selected value Required

Icon toggle

Demo

<!-- onchange -->
<div>
  <mdl-icon-toggle onchange="alert(event.target.checked);" name="format_bold"></mdl-switch>
</div>

<!-- ripple -->
<div>
<mdl-icon-toggle ripple name="format_italic"></mdl-icon-toggle>
</div>

<!-- checked -->
<div>
<mdl-icon-toggle checked name="face"></mdl-icon-toggle>
</div>

<!-- disabled -->
<div>
<mdl-icon-toggle disabled name="mood"></mdl-icon-toggle>
</div>

Configuration options

Attribute Type Effect Remarks
name String Set the icon name" Required
checked Boolean Defines the checkbox as "checked" Optional
disabled Boolean Defines the checkbox as "disabled" Optional
ripple Boolean Applies the ripple effect Optional
onchange Function Callback to receive the change event Optional

Switch

Demo

<mdl-switch onchange="alert(event.target.checked);"></mdl-switch>
<mdl-switch ripple checked label="checked"></mdl-switch>
<mdl-switch disabled label="disabled"></mdl-switch>
<mdl-switch disabled checked label="disabled checked"></mdl-switch>

Configuration options

Attribute Type Effect Remarks
label String Defines the label of the radio Optional
checked Boolean Defines the checkbox as "checked" Optional
disabled Boolean Defines the checkbox as "disabled" Optional
ripple Boolean Applies the ripple effect Optional
onchange Function Callback to receive the change event Optional

Tables

Organize data.

Demo

Material Quantity Unit price
Acrylic (Transparent) 25 $2.90
Plywood (Birch) 50 $1.25
Laminate (Gold on Blue) 10 $2.35 
<mdl-table shadow="4" selectable>
  <table>
    <thead>
      <tr>
        <th>Material</th>
        <th>Quantity</th>
        <th>Unit price</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Acrylic (Transparent)</td>
        <td>25</td>
        <td>$2.90</td>
      </tr>
      <tr>
        <td>Plywood (Birch)</td>
        <td>50</td>
        <td>$1.25</td>
      </tr>
      <tr>
        <td>Laminate (Gold on Blue)</td>
        <td>10</td>
        <td>$2.35</td>
      </tr>
    </tbody>
  </table>
</mdl-table>

Configuration options

Element Attribute Type Effect Remarks
mdl-table shadow Number Defines the shadow depth Optional, Default 0. Must be between 0 and 24
mdl-table selectable Boolean Defines if the table is selectable Optional, Default false

Text Fields

Textual input components.

Text Numeric

<!-- Simple textfield -->
<mdl-textfield
  label="Text...">
</mdl-textfield>

<!-- Numeric textfield -->
<mdl-textfield
  pattern="-?[0-9]*(\.[0-9]+)?"
  error="Input is not a number!"
  label="Number...">
</mdl-textfield>

Text with floating label Numeric with floating label

<!-- Textfield with floating label -->
<mdl-textfield
  label="Text..."
  floating-label>
</mdl-textfield>

<!-- Numeric Textfield with floating label -->
<mdl-textfield
  pattern="-?[0-9]*(\.[0-9]+)?"
  error="Input is not a number!"
  label="Number..."
  floating-label>
</mdl-textfield>

Multiple line Expanding

<!-- Floating Multiline Textfield -->
<mdl-textfield
  rows= "3"
  label="Text lines...">
</mdl-textfield>

<!-- Expandable Textfield -->
<mdl-textfield
  expandable
  expandable-icon="search"
  label="Expandable Input">
</mdl-textfield>

Configuration options

Attribute Type Effect Remarks
disabled Boolean Applies the disabled state Optional
error String Specifies the error message Optional
expandable Boolean Set the textfield as expandable Optional
expandable-icon String Set the icon for the expandable textfield Optional
floating-label Boolean Applies the floating label effect Optional
label String Defines the input label Required
maxrows Number Defines the max rows (multilines) Optional
pattern String Defines the pattern to validate the value Optional
required Boolean Set the textfield as required Optional
rows Number Defines the number of rows (multiline) Optional
value String or Number Defines the 'current' value Optional

Tooltips

Useful information on hover.

Demo

top top tooltop large bottom large bottom tooltop left left tooltop large right large right tooltop
<span id="ttl1">top</span>
<mdl-tooltip for="ttl1" position="top">top tooltop</mdl-tooltip>

<span id="ttl2">large bottom</span>
<mdl-tooltip for="ttl2" large position="bottom">large bottom tooltop</mdl-tooltip>

<span id="ttl3">left</span>
<mdl-tooltip for="ttl3" position="left">left tooltop</mdl-tooltip>

<span id="ttl4">large right</span>
<mdl-tooltip for="ttl4" large position="right">large right tooltop</mdl-tooltip>

Configuration options

Attribute Type Effect Remarks
large Boolean Defines a large tooltip Optional
position String[left, right, top, bottom] Specify the position of the tooltip Optional