tree: 022cfa9de1826536f43db5cbb803e9df0aae76e4 [path history] [tgz]
  1. snippets/
  2. _list.scss
  3. README.md
node_modules/material-design-lite/src/list/README.md

Introduction

Lists present multiple line items vertically as a single continuous element. Refer the Material Design Spec to know more about the content options.

To include the MDL list component:

Create a List with basic items.

 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>

Configuration options

The MDL CSS classes apply various predefined visual enhancements to the list. The table below lists the available classes and their effects.

MDL ClassEffectRemark
.mdl-listDefines list as an MDL component-
.mdl-list__itemDefines the List's Itemsrequired
.mdl-list__item--two-lineDefines the List's Items as Two LineOptional Two Line List Variant
.mdl-list__item--three-lineDefines the List's Items as a Three LineOptional Three Line List Variant
.mdl-list__item-primary-contentDefines the primary content sub-division-
.mdl-list__item-avatarDefines the avatar sub-division-
.mdl-list__item-iconDefines the icon sub-division-
.mdl-list__item-secondary-contentDefines the secondary content sub-divisionrequires .mdl-list__item--two-line or .mdl-list__item--three-line
.mdl-list__item-secondary-infoDefines the information sub-divisionrequires .mdl-list__item--two-line or .mdl-list__item--three-line
.mdl-list__item-secondary-actionDefines the Action sub-divisionrequires .mdl-list__item--two-line or .mdl-list__item--three-line
.mdl-list__item-text-bodyDefines the Text Body sub-divisionrequires .mdl-list__item--three-line