Document

Simple List

  • Content 1

  • Content 2

  • Content 3

  • Content 4

  • Content 5

    <!– Simple List –>
    <ul class=”mdl-list”>
    <li class=”mdl-list_item”><span class=”mdl-listitem-primary-content”>Content 1</span></li>
    <li class=”mdl-list_item”><span class=”mdl-list    item-primary-content”>Content 2</span></li>
    <li class=”mdl-list_item”><span class=”mdl-listitem-primary-content”>Content 3</span></li>
    <li class=”mdl-list_item”><span class=”mdl-list    item-primary-content”>Content 4</span></li>
    <li class=”mdl-list_item”><span class=”mdl-list__item-primary-content”>Content 5</span></li>
    </ul>
    `

    Icon List

  • _1_ Content 1
  • _2_ Content 2
  • _3_ Content 3
  • _4_ Content 4
  • _5_ Content 5 
    `<!-- 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_ content 1 [Star]()
  • _A2_ content 2 [Star]()
  • _A3_ content 3 [Star]() 
    `<!-- 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
  • _R_ Radio
  • _S_ Switch 
    `    <!-- 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_ Content Subtitle Actor [ _Star_ ](#) 
        <!-- 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 -->
    <ul class="mdl-list">
        <li class="mdl-list__item mdl-list__item--two-line">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-avatar">1</i>
                <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>
                <a href="#" class="mdl-list__item-secondary-action">
                    <i class="material-icons">Star</i>
                </a>
            </span>
        </li>
        <!-- List with Text Body -->
        <li class="mdl-list__item mdl-list__item--three-line">
            <span class="mdl-list__item-primary-content">
                <i class="material-icons mdl-list__item-avatar">2</i>
                <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">
                <a href="#" class="mdl-list__item-secondary-action">
                    <i class="material-icons">Star</i>
                </a>
            </span>
        </li>
    </ul>