Lists present multiple line items vertically as a single continuous element. Refer the Material Design Spec to know more about the content options.
1. Code a <ul>
element with the class mdl-list
; this is the "outer" container, intended to hold all of the list's content.
<ul class='mdl-list'> </ul>
2. Code as many <li>
elements as required with the class mdl-list__item
; this is intended to hold all of the item's content.
<ul class='mdl-list'> <li class="mdl-list__item"></li> <li class="mdl-list__item"></li> <li class="mdl-list__item"></li> </ul>
3. Add your content as the children of the <li>
, with the appropriate content type modification class for example .
<ul class='mdl-list'> <li class="mdl-list__item"> <span class="mdl-list__item-primary-content"></span> </li> <li class="mdl-list__item"> <span class="mdl-list__item-primary-content"></span> </li> <li class="mdl-list__item"> <span class="mdl-list__item-primary-content"></span> </li> </ul>
The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.
MDL Class | Effect | Remark |
---|---|---|
.mdl-list | Defines list as an MDL component | - |
.mdl-list__item | Defines the List's Items | required |
.mdl-list__item--two-line | Defines the List's Items as Two Line | Optional Two Line List Variant |
.mdl-list__item--three-line | Defines the List's Items as a Three Line | Optional Three Line List Variant |
.mdl-list__item-primary-content | Defines the primary content sub-division | - |
.mdl-list__item-avatar | Defines the avatar sub-division | - |
.mdl-list__item-icon | Defines the icon sub-division | - |
.mdl-list__item-secondary-content | Defines the secondary content sub-division | requires .mdl-list__item--two-line or .mdl-list__item--three-line |
.mdl-list__item-secondary-info | Defines the information sub-division | requires .mdl-list__item--two-line or .mdl-list__item--three-line |
.mdl-list__item-secondary-action | Defines the Action sub-division | requires .mdl-list__item--two-line or .mdl-list__item--three-line |
.mdl-list__item-text-body | Defines the Text Body sub-division | requires .mdl-list__item--three-line |