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"

8 Material Design Web UI Framework

Origin of Material Design


Google has its own Polymer Project which embraces Material Design thourghout its Web Components. And in fact, the Polymer Project played a key role in Material Design’s development and in showcase of Material Design Concept of Web.

8 Material Design Web UI Framework

1. Materialize


A modern responsive front-end framework based on Material Design. It provides an option of both CSS as well as source SCSS Files, along with JavaScript, Material Design Icon and Roboto font. Included components are basic ones such as grids, forms, buttons, navbar and cards.

Available in 1463860438_social_media_online_github

2. Material UI


Material UI is a CSS Framework and a Set of React Components that implement Google’s Material Design.

Avaiblable in github

3. Paper Bootstrap for Bootstrap

Paper is a bootstrap theme for the Bootstrap Framework.

4. Bootstrap Material


Similar to Paper, Bootstrap Material is another theme for Bootstrap framework and provides all the components included in Bootstrap. Besides, it covers 740 original Material Design Icons from the Google Material Design Icons Repo.

5.Leaf


Leaf is CSS Framework developed by Kim Korte based on the Google’s material design. While still in beta, it has extensive list of components such as buttons, cards, sliders, menu, tabs etc. It includes icons by Icomoon, instead of the original Material Design Icons.

Leaf is also available on github

6.MUI CSS Framework


MUI is lightweighted HTML, CSS and JS Framework for building sites following Google’s Material Design Principles. MUI is designed from the ground up to be fast, small and developer friendly. By design it only includes the basic components you need to build a site that follows Material Design Guideline.

Availabel in github

7. Polymer Project


Google’s Polymer Project is a web framework and their embodiment of material design of teh web.
While still in ‘developer preview’, most of the components are quite mature. Polymer aims to support all major modern browser such as IE(10+), Chrome, Safari, and Firefox.

8. Material Design Lite


Material Design lets you add a Material Design look and feel to your website. It doesn’t rely on any JS frameworks adn aims to optimize for cross devices use, gracefully degrade in older browsers, and offer an experience that is immediately accessible.

Availabel in github

Your browser is out-of-date!

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

×