Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
demo-images
README.md
_app.scss
demo.scss
index.html
main.dart

README.md

##Introduction The Material Design Lite (MDL) list component is an enhanced version of the standard HTML <ul> (unordered list) element. A list consists of a series of related items presented either vertically or horizontally.

An MDL-enhanced list takes two basic forms: inline and styled-view. An inline list presents the list items horizontally, which saves screen space and facilitates viewing and selecting; a style-view list presents the list items vertically, with accompanying images that help identify or clarify the items, and horizontal rules that separate the items.

Lists are a common feature in user interfaces, and allow users to view (and sometimes choose) an item from the series. Their design and use is an important factor in the overall user experience. See the list component's Material Design specifications page for details.

###To include an MDL inline list component:

 1. Code a <ul> element. Inside the unordered list, include one <li> element for each list item to be presented horizontally. That is, for four list items, you would code four <li>s.

<ul>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ul>

 2. Inside the list item elements, place whatever content you want, in the order you want it to appear. Typically, this will be short text strings, but might include small images, links, or other valid HTML content. Remember that the items will be presented inline (horizontally), without bullets or other intervening marks.

<ul>
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

 3. Add the MDL class to the list using the class attribute.

<ul class="mdl-list--inline">
  <li>Item1</li>
  <li>Item2</li>
  <li>Item3</li>
  <li>Item4</li>
</ul>

The inline list component is ready for use.

####Examples

A simple inline list.

<ul class="mdl-list--inline">
  <li>Aardvarks</li>
  <li>Butterflies</li>
  <li>Canaries</li>
  <li>Deer</li>
</ul>

An inline list with links.

    <p>Australian animals that might kill you include:</p>
    <ul class="mdl-list--inline">
      <li><a href="http://www.australiananimals.com/jellies">Box jellyfish</a></li>
      <li><a href="http://www.australiananimals.com/spiders">Spiders</a></li>
      <li><a href="http://www.australiananimals.com/snakes">Snakes</a></li>
      <li><a href="http://www.australiananimals.com/salties">Saltwater crocodiles</a></li>
    </ul>

###To include an MDL styled-view list component:

 1. Code a <div> element; this will hold the styled list. Inside the div, code a <ul> element; inside this unordered list, include one <li> element for each styled list item to be presented. That is, for four list items, you would code four <li>s.

<div>
  <ul>
    <li>
    ...
    </li>
    <li>
    ...
    </li>
    <li>
    ...
    </li>
    <li>
    ...
    </li>
  </ul>
</div>

 2. Inside each list item, code two <span> elements. The first span should have no content (although it can — see Examples below), and the second should contain whatever content you want to display. Typically, this will be short text strings.

<div>
  <ul>
    <li>
      <span></span>
      <span>Item1</span>
    </li>
    <li>
      <span></span>
      <span>Item2</span>
    </li>
    <li>
      <span></span>
      <span>Item3</span>
    </li>
    <li>
      <span></span>
      <span>Item4</span>
    </li>
  </ul>
</div>

 3. Add MDL classes to the div and the spans using the class attribute.

<div class="mdl-list--styled-view">
  <ul>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Item1</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Item2</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Item3</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Item4</span>
    </li>
  </ul>
</div>

The styled-view list component is ready for use.

####Examples

A styled-view list of people's names, with default "avatar" images.

<div class="mdl-list--styled-view">
  <ul>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Allen Anderson</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Barbara Barnes</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Charlie Connors</span>
    </li>
    <li>
      <span class="mdl-list-view--avatar"></span>
      <span class="mdl-list-view--name">Darlene Davis</span>
    </li>
  </ul>
</div>

A styled-view list with custom images.

<div class="mdl-list--styled-view">
  <p>Australian animals that can kill you include:</p>  
  <ul>
    <li>
      <span><img src="jellies.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
      <span class="mdl-list-view--name">Box jellyfish</span>
    </li>
    <li>
      <span><img src="spiders.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
      <span class="mdl-list-view--name">Spiders</span>
    </li>
    <li>
      <span><img src="snakes.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
      <span class="mdl-list-view--name">Snakes</span>
    </li>
    <li>
      <span><img src="salties.png" style="height:50px; width:50px; margin:10px 15px;" /></span>
      <span class="mdl-list-view--name">Saltwater crocodiles</span>
    </li>
  </ul>
</div>

##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 Remarks
mdl-list--inline Defines list as an MDL inline list Required on ul element
mdl-list--styled-view Defines div as an MDL styled-view list container Required on div element
mdl-list-view--avatar Defines span as an MDL avatar image Required on the first of two span elements for default styled-view list; omit if using custom images
mdl-list-view--name Defines span as an MDL styled-list text item Required on the second of two span elements

##More information For working examples of the list component, see the MDL list demo page.