material-design-lite

History

Zsolt Prontvai da66171262 Fix alignment in list-control.html		2016-10-10 18:38:58 +02:00
..
snippets	Fix alignment in list-control.html	2016-10-10 18:38:58 +02:00
README.md	Fix list class reference to display the proper modifier classes.	2016-09-14 07:34:28 -04:00
_list.scss	Improves the list to bring it closer to spec.	2016-02-03 11:45:17 +00:00

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 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`