MDL-Tooltip





Default Tooltip

Title1
Follow
<!-- Simple Tooltip -->
<div class="icon material-icons" id="tt1">Title1</div>
<div class="mdl-tooltip" for="tt1">Follow</div>
`</pre>

### Large Tooltip

<!-- Simple Tooltip -->

<div class="icon material-icons" id="tt2">Title2</div>

<div class="mdl-tooltip mdl-tooltip--large" for="tt2">Large</div>

<pre>`&lt;!-- Simple Tooltip --&gt;
&lt;div class="icon material-icons" id="tt2"&gt;Title2&lt;/div&gt;
&lt;div class="mdl-tooltip mdl-tooltip--large" for="tt2"&gt;Large&lt;/div&gt;
`</pre>

### Rich Tooltip

<!-- Rich Tooltip -->

<div class="icon material-icons" id="tt3">Rich</div>

<div class="mdl-tooltip" for="tt3">Upload **file.zip**</div>

<pre>`&lt;!-- Rich Tooltip --&gt;
&lt;div class="icon material-icons" id="tt3"&gt;Rich&lt;/div&gt;
&lt;div class="mdl-tooltip" for="tt3"&gt;Upload &lt;strong style='color:yellow'&gt;file.zip&lt;/strong&gt;&lt;/div&gt;

MDL-Textfield





Text Field & Numeric Textfield






&lt;br&gt;
&lt;!-- Numeric Textfield --&gt;
&lt;form action="#"&gt;
    &lt;div class="mdl-textfield mdl-js-textfield"&gt;
        &lt;input type="text" class="mdl-textfield__input" id="sample2" pattern="-?[0-9]*(.[0-9]+)?"&gt;
        &lt;label for="sample2" class="mdl-textfield__label"&gt;Numeric Textfield&lt;/label&gt;
        &lt;span class="mdl-textfield__error"&gt;Input is not a number!&lt;/span&gt;
    &lt;/div&gt;
`</pre>

</form>

<pre>`&lt;!-- Simple Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample1"&gt;
            &lt;label for="sample1" class="mdl-textfield__label"&gt;PlaceHolder..&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
    &lt;br&gt;
    &lt;!-- Numeric Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample2" pattern="-?[0-9]*(.[0-9]+)?"&gt;
            &lt;label for="sample2" class="mdl-textfield__label"&gt;Numeric Textfield&lt;/label&gt;
            &lt;span class="mdl-textfield__error"&gt;Input is not a number!&lt;/span&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Floating Label Textfield

<!-- Floating Label -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
            <input type="text" class="mdl-textfield__input" id="sample3">
            <label for="sample3" class="mdl-textfield__label">Floating</label>
        </div>
</form>

<pre>`&lt;!-- Floating Label --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label"&gt;
            &lt;input type="text" class="mdl-textfield__input" id="sample3"&gt;
            &lt;label for="sample3" class="mdl-textfield__label"&gt;Floating&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Multiple Line Textfield

<!-- Multiple Line -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield">
            <textarea name="" id="sample4" cols="30" rows="3" class="mdl-textfield__input" type="text"></textarea>
            <label for="sample4" class="mdl-textfield__label">Multiple Line</label>
        </div>
</form>

<pre>`    &lt;!-- Multiple Line --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield"&gt;
            &lt;textarea name="" id="sample4" cols="30" rows="3" class="mdl-textfield__input" type="text"&gt;&lt;/textarea&gt;
            &lt;label for="sample4" class="mdl-textfield__label"&gt;Multiple Line&lt;/label&gt;
        &lt;/div&gt;
    &lt;/form&gt;
`</pre>

### Expandable Textfield

<!-- Expandable Textfield -->

<form action="#">
        <div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable">
            <label for="sample5" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect">
                _S_
            </label>
            <div class="mdl-textfield__expandable-holder">
                <input type="text" class="mdl-textfield__input" id="sample5">
                <label for="sample5" class="mdl-textfield__label">Expandable Input</label>
            </div>
        </div>
</form>

<pre>`    &lt;!-- Expandable Textfield --&gt;
    &lt;form action="#"&gt;
        &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable"&gt;
            &lt;label for="sample5" class="mdl-button mdl-js-button mdl-button--icon mdl-js-ripple-effect"&gt;
                &lt;i class="material-icons"&gt;S&lt;/i&gt;
            &lt;/label&gt;
            &lt;div class="mdl-textfield__expandable-holder"&gt;
                &lt;input type="text" class="mdl-textfield__input" id="sample5"&gt;
                &lt;label for="sample5" class="mdl-textfield__label"&gt;Expandable Input&lt;/label&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/form&gt;

MDL-Table





Selectable Table


























Material Quantity Unit Price
Acrylic(Transparent) 25 $2.90
Plywood(Birch) 50 $1.25
Laminate(Gold on Blue) 10 $2.35
&lt;table class="mdl-data-table mdl-js-data-table mdl-data-table--selectable mdl-shadow--2dp"&gt;
    &lt;thead&gt;
        &lt;tr&gt;
            &lt;th class="mdl-data-table__cell--non-numeric"&gt;Material&lt;/th&gt;
            &lt;th&gt;Quantity&lt;/th&gt;
            &lt;th&gt;Unit Price&lt;/th&gt;
        &lt;/tr&gt;
    &lt;/thead&gt;
    &lt;tbody&gt;
        &lt;tr&gt;
            &lt;td class="mdl-data-table__cell--non-numeric"&gt;Acrylic(Transparent)&lt;/td&gt;
            &lt;td&gt;25&lt;/td&gt;
            &lt;td&gt;$2.90&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="mdl-data-table__cell--non-numeric"&gt;Plywood(Birch)&lt;/td&gt;
            &lt;td&gt;50&lt;/td&gt;
            &lt;td&gt;$1.25&lt;/td&gt;
        &lt;/tr&gt;
        &lt;tr&gt;
            &lt;td class="mdl-data-table__cell--non-numeric"&gt;Laminate(Gold on Blue)&lt;/td&gt;
            &lt;td&gt;10&lt;/td&gt;
            &lt;td&gt;$2.35&lt;/td&gt;
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

MDL-Selection





Checkbox

&lt;!-- Checkbox --&gt;
&lt;label for="checkbox1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect"&gt;
        &lt;input type="checkbox" class="mdl-checkbox__input" id="checkbox1"&gt;
        &lt;span class="mdl-checkbox__label"&gt;Checkbox&lt;/span&gt;
&lt;/label&gt;
`</pre>

### Radio Button

<!-- Radio Button -->
<label for="option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
    <input type="button" id="option-1" class="mdl-radio__button" name="options" value="1">
    <span class="mdl-radio__label">Radio</span>
</label>

<pre>`&lt;!-- Radio Button --&gt;
&lt;label for="option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect"&gt;
    &lt;input type="button" id="option-1" class="mdl-radio__button" name="options" value="1"&gt;
    &lt;span class="mdl-radio__label"&gt;Radio&lt;/span&gt;
&lt;/label&gt;
`</pre>

### Icon Toggle

<!-- Icon Toggle -->
<label for="icon-toggle-1" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect">
<input type="checkbox" class="mdl-icon-toggle__input" id="icon-toggle-1">
_Icon_
</label>

<pre>`&lt;!-- Icon Toggle --&gt;
 &lt;label for="icon-toggle-1" class="mdl-icon-toggle mdl-js-icon-toggle mdl-js-ripple-effect"&gt;
    &lt;input type="checkbox" class="mdl-icon-toggle__input" id="icon-toggle-1"&gt;
    &lt;i class="mdl-icon-toggle__label material-icons"&gt;Icon&lt;/i&gt;
&lt;/label&gt;
`</pre>

### Switch

<!-- Switch -->
<label for="switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect">
    <input type="checkbox" class="mdl-switch__input" id="switch-1">
    <span class="mdl-switch__label"></span>
</label>

<pre>`&lt;!-- Switch --&gt;
&lt;label for="switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"&gt;
    &lt;input type="checkbox" class="mdl-switch__input" id="switch-1"&gt;
    &lt;span class="mdl-switch__label"&gt;&lt;/span&gt;
&lt;/label&gt;

MDL-Snackbar








&lt;button id="show-snackbar" class="mdl-button mdl-js-button mdl-button--raised mdl-js-ripple-effect" type="button"&gt;Show Snackbar&lt;/button&gt;
&lt;div id="snackbar" class="mdl-snackbar mdl-js-snackbar"&gt;
        &lt;div class="mdl-snackbar__text"&gt;&lt;/div&gt;
        &lt;button class="mdl-snackbar__action" type="button"&gt;&lt;/button&gt;
&lt;/div&gt;

&lt;script&gt;
        (function(){
            'user strict'
            var snackbarContainer = document.querySelector('#snackbar');
            var showSnackbarButton = document.querySelector('#show-snackbar');
            var handler = function(event){
                showSnackbarButton.style.backgroundColor = '';
            };
            showSnackbarButton.addEventListener('click', function(){
                'user strict'
                showSnackbarButton.style.backgroundColor = '#' + Math.floor(Math.random() * 0xffffff).toString(16);
                var data={
                    message: "Button Color Changed.",
                    timeout: 2000,
                    actionHandler: handler,
                    actionText: "Undo"
                };
                snackbarContainer.MaterialSnackbar.showSnackbar(data);
            });
        }());
&lt;/script&gt;

MDL-Slider




Default Slider

&lt;!-- Default Slider --&gt;
&lt;input type="range" class="mdl-slider mdl-js-slider" min="0" max="100" value="0" tabindex="0"&gt;
`</pre>

### Slider with Starting Value

<!-- Slider with Starting Value -->
<input type="range" class="mdl-slider mdl-js-slider" min="0" max="100" value="25" tabindex="0">

<pre>`&lt;!-- Slider with Starting Value --&gt;
&lt;input type="range" class="mdl-slider mdl-js-slider" min="0" max="100" value="25" tabindex="0"&gt;

MDL-Menu





Left Aligned Menu Below Button

  • Some Action
  • Another Action
  • Disabled Action
  • Yet Another Action

    &lt;!-- Left aligned menu below button --&gt;
    &lt;button id="leftBelowButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab"&gt;
        &lt;i class="material-icons"&gt;i&lt;/i&gt;
    &lt;/button&gt;
    &lt;ul class="mdl-menu mdl-js-menu mdl-menu--bottom-left mdl-js-ripple-effect" for="leftBelowButton"&gt;
        &lt;li class="mdl-menu__item"&gt;Some Action&lt;/li&gt;
        &lt;li class="mdl-menu__item mdl-menu__item--full-bleed-divider"&gt;Another Action&lt;/li&gt;
        &lt;li class="mdl-menu__item" disabled&gt;Disabled Action&lt;/li&gt;
        &lt;li class="mdl-menu__item"&gt;Yet Another Action&lt;/li&gt;
    &lt;/ul&gt;
    

    `

    Right Aligned Menu Below Button

  • Some Action

  • Another Action
  • Disabled Action
  • Yet Another Action

    `    <!-- Right aligned menu below button -->
        <button id="rightBelowButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
            <i class="material-icons">i</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-menu--bottom-right mdl-js-ripple-effect" for="rightBelowButton">
            <li class="mdl-menu__item">Some Action</li>
            <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
            <li class="mdl-menu__item" disabled>Disabled Action</li>
            <li class="mdl-menu__item">Yet Another Action</li>
        </ul>
    `

    Left Aligned Menu Above Button

  • Some Action

  • Another Action
  • Disabled Action
  • Yet Another Action

    `    <!-- Left aligned menu above button -->
        <button id="leftAboveButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab">
            <i class="material-icons">i</i>
        </button>
        <ul class="mdl-menu mdl-js-menu mdl-menu--top-left mdl-js-ripple-effect" for="leftAboveButton">
            <li class="mdl-menu__item">Some Action</li>
            <li class="mdl-menu__item mdl-menu__item--full-bleed-divider">Another Action</li>
            <li class="mdl-menu__item" disabled>Disabled Action</li>
            <li class="mdl-menu__item">Yet Another Action</li>
        </ul>
    `

    Right Aligned Menu Above Button

  • Some Action

  • Another Action
  • Disabled Action
  • Yet Another Action

    `    <!– Right aligned menu above button –>

    &lt;button id="rightAboveButton" class="mdl-button mdl-js-button mdl-button--icon mdl-button--fab"&gt;
        &lt;i class="material-icons"&gt;i&lt;/i&gt;
    &lt;/button&gt;
    &lt;ul class="mdl-menu mdl-js-menu mdl-menu--top-right mdl-js-ripple-effect" for="rightAboveButton"&gt;
        &lt;li class="mdl-menu__item"&gt;Some Action&lt;/li&gt;
        &lt;li class="mdl-menu__item mdl-menu__item--full-bleed-divider"&gt;Another Action&lt;/li&gt;
        &lt;li class="mdl-menu__item" disabled&gt;Disabled Action&lt;/li&gt;
        &lt;li class="mdl-menu__item"&gt;Yet Another Action&lt;/li&gt;
    &lt;/ul&gt;
    

MDL-Loading

Defaut Progress Bar

&lt;!-- Simple MDL Progress Bar --&gt;
    &lt;div class="mdl-progress mdl-js-progress" id="p1"&gt;&lt;/div&gt;
    &lt;script&gt;
        document.querySelector('#p1').addEventListener('mdl-componentupgraded', function(){
            this.MaterialProgress.setProgress(44);
        })
    &lt;/script&gt;
`</pre>

### Intedeterminate Progress Bar

<!-- MDL Progress Bar with Indeterminate Progress -->

<div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"></div>

<pre>`&lt;!-- MDL Progress Bar with Indeterminate Progress --&gt;
&lt;div id="p2" class="mdl-progress mdl-js-progress mdl-progress__indeterminate"&gt;&lt;/div&gt;
`</pre>

### Buffering Progress Bar

<pre>`    &lt;!-- MDL Progress Bar with Buffering --&gt;
    &lt;div class="mdl-progress mdl-js-progress" id="p1"&gt;&lt;/div&gt;
    &lt;script&gt;
        document.querySelector('#p1').addEventListener('mdl-componentupgraded', function(){
            this.MaterialProgress.setProgress(33);
            this.MaterialProgress.setBuffer(66);
        })
    &lt;/script&gt;
`</pre>

### Default Spinner

<div class="mdl-spinner mdl-js-spinner is-active"></div>

<pre>`&lt;div class="mdl-spinner mdl-js-spinner is-active"&gt;&lt;/div&gt;
`</pre>

### Single Color Spinner

<div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"></div>

<pre>`&lt;div class="mdl-spinner mdl-spinner--single-color mdl-js-spinner is-active"&gt;&lt;/div&gt;

MDL-List



Document



Simple List

  • Content 1
  • Content 2
  • Content 3
  • Content 4
  • Content 5

    <!– Simple List –>
    <ul class=”mdl-list”>

    &lt;li class="mdl-list_item"&gt;&lt;span class="mdl-list__item-primary-content"&gt;Content 1&lt;/span&gt;&lt;/li&gt;
    &lt;li class="mdl-list_item"&gt;&lt;span class="mdl-list__item-primary-content"&gt;Content 2&lt;/span&gt;&lt;/li&gt;
    &lt;li class="mdl-list_item"&gt;&lt;span class="mdl-list__item-primary-content"&gt;Content 3&lt;/span&gt;&lt;/li&gt;
    &lt;li class="mdl-list_item"&gt;&lt;span class="mdl-list__item-primary-content"&gt;Content 4&lt;/span&gt;&lt;/li&gt;
    &lt;li class="mdl-list_item"&gt;&lt;span class="mdl-list__item-primary-content"&gt;Content 5&lt;/span&gt;&lt;/li&gt;
    

    </ul>
    `

    Icon List

  •     _1_
        Content 1
    </span>
    
  •     _2_
        Content 2
    </span>
    
  •     _3_
        Content 3
    </span>
    
  •     _4_
        Content 4
    </span>
    
  •     _5_
        Content 5
    </span>
    
    `<!-- Icon List -->
    <ul class="mdl-list">
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">1</i>
                <p>Content 1</p>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">2</i>
                <p>Content 2</p>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">3</i>
                <p>Content 3</p>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">4</i>
                <p>Content 4</p>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-icon">5</i>
                <p>Content 5</p>
            </span></li>
    </ul>
    `

    Avatars and Actions

  •     _A1_
        <span>content 1</span>
        [Star]()
    </span>
    
  •     _A2_
        <span>content 2</span>
        [Star]()
    </span>
    
  •     _A3_
        <span>content 3</span>
        [Star]()
    </span>
    
    `<!-- List Item with Avatar and Action -->
    <ul class="mdl-list">
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-avatar">A1</i>
                <span>content 1</span>
                <a href="" class="mdl-list_item-secondary-action">Star</a>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-avatar">A2</i>
                <span>content 2</span>
                <a href="" class="mdl-list_item-secondary-action">Star</a>
            </span></li>
        <li class="mdl-list__item">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-avatar">A3</i>
                <span>content 3</span>
                <a href="" class="mdl-list_item-secondary-action">Star</a>
            </span></li>
    </ul>
    `

    Avatars and Controls

  •     _C_
    Checkbox
    </span>
    <span class="mdl-list__item-secondary-action">
        <label for="list-checkbox-1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
            <input type="checkbox" class="mdl-checkbox__input" checked id="list-checkbox-1">
        </label>
    </span>
    
  •     _R_
        Radio
    </span>
    <span class="mdl-list__item-secondary-action">
        <label for="list-option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
            <input type="radio" class="mdl-radio__button" id="list-option-1" name="options" value="1" checked="">
        </label>
    </span>
    
  •     _S_
        Switch
    </span>
    <span class="mdl-list__item-secondary-action">
        <label for="list-switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"><input type="checkbox" checked class="mdl-switch__input" id="list-switch-1"></label>
    </span>
    
    `    <!-- List with Avatar and Controls -->
        <ul class="mdl-list">
            <li class="mdl-list__item">
                <span class="mdl-list__item-primary-content">
                    <i class="material-icons mdl-list__item-avatar">C</i>
                Checkbox
                </span>
                <span class="mdl-list__item-secondary-action">
                    <label for="list-checkbox-1" class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect">
                        <input type="checkbox" class="mdl-checkbox__input" checked id="list-checkbox-1">
                    </label>
                </span>
            </li>
            <li class="mdl-list__item">
                <span class="mdl-list__item-primary-content">
                    <i class="material-icons mdl-list__item-avatar">R</i>
                    Radio
                </span>
                <span class="mdl-list__item-secondary-action">
                    <label for="list-option-1" class="mdl-radio mdl-js-radio mdl-js-ripple-effect">
                        <input type="radio" class="mdl-radio__button" id="list-option-1" name="options" value="1" checked="">
                    </label>
                </span>
            </li>
            <li class="mdl-list__item">
                <span class="mdl-list__item-primary-content">
                    <i class="material-icons mdl-list__item-avatar">S</i>
                    Switch
                </span>
                <span class="mdl-list__item-secondary-action">
                    <label for="list-switch-1" class="mdl-switch mdl-js-switch mdl-js-ripple-effect"><input type="checkbox" checked class="mdl-switch__input" id="list-switch-1"></label>
                </span>
            </li>
        </ul>
    `

    List of Multi-line

  •         _1_
            <span>Content</span>
            <span class="mdl-list__item-sub-title">Subtitle</span>
        </span>
        <span class="mdl-list__item-secondary-content">
            <span class="mdl-list__item-secondary-info">Actor</span>
            [
                _Star_
            ](#)
        </span>
    
    <!-- List with Text Body -->*   <span class="mdl-list__item-primary-content">
            _2_
            <span>Content</span>
            <span class="mdl-list__item-text-body">
                Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolor asperiores totam accusantium quaerat sint nam illum ad praesentium et, reiciendis vel doloremque ex minima ipsam sit dignissimos facilis excepturi.
            </span>
        </span>
        <span class="mdl-list__item-secondary-content">
            [
                _Star_
            ](#)
        </span>
    

    `<!– Two Line List with Secondary Info and Action –>

    &lt;ul class="mdl-list"&gt;
        &lt;li class="mdl-list__item mdl-list__item--two-line"&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                &lt;i class="material-icons mdl-list__item-avatar"&gt;1&lt;/i&gt;
                &lt;span&gt;Content&lt;/span&gt;
                &lt;span class="mdl-list__item-sub-title"&gt;Subtitle&lt;/span&gt;
            &lt;/span&gt;
            &lt;span class="mdl-list__item-secondary-content"&gt;
                &lt;span class="mdl-list__item-secondary-info"&gt;Actor&lt;/span&gt;
                &lt;a href="#" class="mdl-list__item-secondary-action"&gt;
                    &lt;i class="material-icons"&gt;Star&lt;/i&gt;
                &lt;/a&gt;
            &lt;/span&gt;
        &lt;/li&gt;
        &lt;!-- List with Text Body --&gt;
        &lt;li class="mdl-list__item mdl-list__item--three-line"&gt;
            &lt;span class="mdl-list__item-primary-content"&gt;
                &lt;i class="material-icons mdl-list__item-avatar"&gt;2&lt;/i&gt;
                &lt;span&gt;Content&lt;/span&gt;
                &lt;span class="mdl-list__item-text-body"&gt;
                    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Laboriosam dolor asperiores totam accusantium quaerat sint nam illum ad praesentium et, reiciendis vel doloremque ex minima ipsam sit dignissimos facilis excepturi.
                &lt;/span&gt;
            &lt;/span&gt;
            &lt;span class="mdl-list__item-secondary-content"&gt;
                &lt;a href="#" class="mdl-list__item-secondary-action"&gt;
                    &lt;i class="material-icons"&gt;Star&lt;/i&gt;
                &lt;/a&gt;
            &lt;/span&gt;
        &lt;/li&gt;
    &lt;/ul&gt;
    

MDL-Navigation

Transparent Navigation

Transparent Navigation

.demo-layout-transparent{
        background: url('https://getmdl.io/assets/demos/transparent.jpg') center/cover;
    }
&lt;/style&gt;
&lt;/head&gt;
&lt;/body&gt;
    &lt;div class="demo-layout-transparent mdl-layout mdl-js-layout"&gt;
        &lt;header class="mdl-layout__header mdl-layout__header--transparent"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;!--Title--&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
                &lt;!--Add spacer, to align navigation to the right--&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;!--Navigation--&gt;
                &lt;nav class="mdl-navigation"&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;nav class="mdl-navigation__link" href="#"&gt;Link&lt;/nav&gt;
            &lt;nav class="mdl-navigation__link" href="#"&gt;Link&lt;/nav&gt;
            &lt;nav class="mdl-navigation__link" href="#"&gt;Link&lt;/nav&gt;
            &lt;nav class="mdl-navigation__link" href="#"&gt;Link&lt;/nav&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Fixed Drawer without Header(The drawer will open automatically in large screen)

![Fixed Drawer](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedDrawer1.png)

<pre>`    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer"&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Fixed Header(The Header shows always, even in small screen)

![Fixed Header](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedHeader.png)

<pre>`    &lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;nav class="mdl-navigation mdl-navigation--large-screen-only"&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;
                Title
            &lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Fixed Header and Drawer

![Fixed Header and Drawer](http://7xu8mu.com1.z0.glb.clouddn.com/wp-content/uploads/FixedHeader&Drawer.png)

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-drawer mdl-layout--fixed-header"&gt;
        &lt;header class="mdl-layout__header"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-text--align-right"&gt;
                    &lt;label for="fixed-header-drawer-exp" class="mdl-button mdl-js-button mdl-button--icon"&gt;S&lt;/label&gt;
                    &lt;div class="mdl-textfield__expandable-holder"&gt;
                        &lt;input type="text" class="mdl-textfield__input" name="sample" id="fixed-header-drawer-exp"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Scrolling Header

<pre>`&lt;div class="mdl-layout mdl-js-layout"&gt;
        &lt;header class="mdl-layout__header mdl-layout__header--scroll"&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;/div&gt;
            &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="#" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Waterfall Header

<pre>`    &lt;div class="demo-layout-water mdl-layout mdl-js-layout"&gt;
        &lt;header class="mdl-layout__header mdl-layout--water"&gt;
            &lt;!-- Top Row Always Visible --&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;!-- Title --&gt;
                &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;div class="mdl-textfield mdl-js-textfield mdl-textfield--expandable mdl-textfield--floating-label mdl-textfield--align-right"&gt;
                    &lt;label for="waterfall-exp" class="mdl-button mdl-js-button mdl-button--icon"&gt;
                        &lt;i class="material-icons"&gt;Search&lt;/i&gt;
                    &lt;/label&gt;
                    &lt;div class="mdl-textfield__expandable-holder"&gt;
                        &lt;input type="text" name="sample" id="waterfall-exp" class="mdl-textfield__input"&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
            &lt;!-- Bottom Row, Invisible on Scroll --&gt;
            &lt;div class="mdl-layout__header-row"&gt;
                &lt;div class="mdl-layout-spacer"&gt;&lt;/div&gt;
                &lt;nav class="mdl-navigation"&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                    &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;/nav&gt;
            &lt;/div&gt;
        &lt;/header&gt;
        &lt;div class="mdl-layout__drawer"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt; 
            &lt;nav class="mdl-navigation"&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
                &lt;a href="" class="mdl-navigation__link"&gt;Link&lt;/a&gt;
            &lt;/nav&gt;
        &lt;/div&gt;
    &lt;/div&gt;
`</pre>

### Scrollable Tabs

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header"&gt;
    &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
        &lt;/div&gt;
        &lt;!-- Tab --&gt;
        &lt;div class="mdl-layout__tab-bar mdl-js-ripple-effect"&gt;
            &lt;a href="#scroll-tab-1" class="mdl-layout__tab is-active"&gt;Tab 1&lt;/a&gt;
            &lt;a href="#scroll-tab-2" class="mdl-layout__tab"&gt;Tab 2&lt;/a&gt;
            &lt;a href="#scroll-tab-3" class="mdl-layout__tab"&gt;Tab 3&lt;/a&gt;
            &lt;a href="#scroll-tab-4" class="mdl-layout__tab"&gt;Tab 4&lt;/a&gt;
            &lt;a href="#scroll-tab-5" class="mdl-layout__tab"&gt;Tab 5&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
    &lt;/div&gt;
    &lt;main class="mdl-layout__content"&gt;
        &lt;section class="mdl-layout__tab-panel is-active" id="scroll-tab-1"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 1&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-2"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 2&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-3"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 3&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-4"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 4&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="scroll-tab-5"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 5&lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
&lt;/div&gt;
`</pre>

### Fixed Tabs

<pre>`&lt;div class="mdl-layout mdl-js-layout mdl-layout--fixed-header mdl-layout--fixed-tabs"&gt;
    &lt;header class="mdl-layout__header"&gt;
        &lt;div class="mdl-layout__header-row"&gt;
            &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
        &lt;/div&gt;
        &lt;div class="mdl-layout__tab-bar mdl-js-ripple-effect"&gt;
            &lt;a href="#fixed-tab-1" class="mdl-layout__tab is-active"&gt;Tab 1&lt;/a&gt;
            &lt;a href="#fixed-tab-2" class="mdl-layout__tab"&gt;Tab 2&lt;/a&gt;
            &lt;a href="#fixed-tab-3" class="mdl-layout__tab"&gt;Tab 3&lt;/a&gt;
        &lt;/div&gt;
    &lt;/header&gt;
    &lt;div class="mdl-layout__drawer"&gt;
        &lt;span class="mdl-layout-title"&gt;Title&lt;/span&gt;
    &lt;/div&gt;
    &lt;main class="mdl-layout__content"&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-1"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 1&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-2"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 2&lt;/div&gt;
        &lt;/section&gt;
        &lt;section class="mdl-layout__tab-panel" id="fixed-tab-3"&gt;
            &lt;div class="page-content" style="height:500px"&gt;Tab 3&lt;/div&gt;
        &lt;/section&gt;
    &lt;/main&gt;
&lt;/div&gt;
&lt;/div&gt;

MDL-Button











: class=”mdl-button mdl-js-button mdl-button–fab mdl-button–colored mdl-js-ripple-effect”, “mdl-button–fab” adds the 3D circle, “mdl-button–colored” colors the 3D circle, “mdl-js-ripple-effect” adds ripple effect ont the button


: class=”mdl-button mdl-js-button mdl-button–raised mdl-js-ripple-effect”, “mdl-button–raised” adds the 3D Rectangle on the button.

: class=”mdl-button mdl-js-button mdl-button–raised mdl-button–colored”, “mdl-button–colored” add Primary color to Button.

: class=”mdl-button mdl-js-button mdl-button–raised mdl-button–accent”, “mdl-button–accent” adds Accent color ont he Button.

: class=”mdl-button mdl-js-button mdl-button–primary”, “mdl-button–primary” adds primary color on the text.

: class=”mdl-button mdl-js-button mdl-button–accent”, “mdl-button–accent” adds accent color on the text


: class=”mdl-button mdl-js-button mdl-button–fab mdl-button–mini-fab”, “mdl-button–mini-fab” make a mini button”



<!– Colored FAB Button –>
<button class=”mdl-button mdl-js-button mdl-button–fab mdl-button–colored mdl-js-ripple-effect”>Add</button>: class=”mdl-button mdl-js-button mdl-button–fab mdl-button–colored mdl-js-ripple-effect”, <strong>”mdl-button–fab” adds the 3D circle, “mdl-button–colored” colors the 3D circle, “mdl-js-ripple-effect” adds ripple effect ont the button</strong><br>
<!– Raised Button –>
<button class=”mdl-button mdl-js-button mdl-button–raised mdl-js-ripple-effect”>Button</button>: class=”mdl-button mdl-js-button mdl-button–raised mdl-js-ripple-effect”, <strong>”mdl-button–raised” adds the 3D Rectangle on the button.</strong><br>
<button class=”mdl-button mdl-js-button mdl-button–raised mdl-button–colored”>Button</button>: class=”mdl-button mdl-js-button mdl-button–raised mdl-button–colored”, <strong>”mdl-button–colored” add Primary color to Button.</strong><br>
<button class=”mdl-button mdl-js-button mdl-button–raised mdl-button–accent”>Button</button>: class=”mdl-button mdl-js-button mdl-button–raised mdl-button–accent”, <strong>”mdl-button–accent” adds Accent color ont he Button.</strong><br>
<button class=”mdl-button mdl-js-button mdl-button–primary”>Button</button>: class=”mdl-button mdl-js-button mdl-button–primary”, <strong>”mdl-button–primary” adds primary color on the text.</strong><br>
<button class=”mdl-button mdl-js-button mdl-button–accent”>Button</button>: class=”mdl-button mdl-js-button mdl-button–accent”, <strong>”mdl-button–accent” adds accent color on the text</strong><br>
<!– Mini FAB Button –>
<button class=”mdl-button mdl-js-button mdl-button–fab mdl-button–mini-fab”>i</button>: class=”mdl-button mdl-js-button mdl-button–fab mdl-button–mini-fab”, <strong>”mdl-button–mini-fab” make a mini button”</strong><br>

MDL-Badge







Badge
: class="material-icons mdl-badge mdl-badge--overlap" Badge: class="mdl-badge", **the material-icons makes the text bigger, and mdl-badge--overlap makes badge overlap the text** [Badge](#): Badge in the inlink [Badge](#): Badge outside the link [Badge](#): Badge with too many characters(12345) [Badge](#): class="mdl-badge mdl-badge--no-background"
&lt;!-- Number badge on icon --&gt;
&lt;div class="material-icons mdl-badge mdl-badge--overlap" data-badge="1"&gt;Badge&lt;/div&gt;: class="material-icons mdl-badge mdl-badge--overlap"&lt;br&gt;
&lt;span class="mdl-badge" data-badge="2"&gt;Badge&lt;/span&gt;: class="mdl-badge", &lt;strong&gt;the material-icons makes the text bigger, and mdl-badge--overlap makes badge overlap the text&lt;/strong&gt;&lt;br&gt;
&lt;a href="#" class="mdl-badge" data-badge="3"&gt;Badge&lt;/a&gt;: Badge in the inlink&lt;br&gt;
&lt;a href="#"&gt;Badge&lt;/a&gt;&lt;span class="mdl-badge" data-badge="4"&gt;&lt;/span&gt;: Badge outside the link&lt;br&gt;
&lt;a href="#" class="mdl-badge" data-badge="12345"&gt;Badge&lt;/a&gt;: Badge with too many characters(12345)&lt;br&gt;
&lt;a href="#" class="mdl-badge mdl-badge--no-background" data-badge="6"&gt;Badge&lt;/a&gt;: class="mdl-badge mdl-badge--no-background"
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×