ionic list

List is a widely used interface elements, almost always to use in all mobile app.

The list can be a basic text, buttons, switches, and other thumbnail icons.

List item can be any HTML element. Container elements required class list, each list item is required item category.

ionList ionItem and can easily support a variety of interactive ways, such as slide editing, drag the sort, and delete items.

Basic usage:

<ul class="list">
    <li class="item">
      ...
    </li>
</ul>

try it"

List separator

We can use item-divider class to create a separator list, by default, the list of items in a different background color and bold font to distinguish, but you can easily customize his.

<div class="list">

  <div class="item item-divider">
    Candy Bars
  </div>

  <a class="item" href="#">
    Butterfinger
  </a>

  ...

</div>

try it"

With icons list

We can specify an icon to the left or right side of the list items.

Use item-icon-left icon in the left, item-icon-right settings icon on the right side. If you need both sides of the icon, the two classes are added on to.

The following examples, we used <a> label in the list item, so that each list item clickable.

List item when you use <a> or <button> element, if the right of the icon is not added, it will be automatically added to arrows.

Example, the first item only icons on the left, about the second icon has, there is the third icon on the right (as well as Notes item-note), the fourth has a badge (mark) elements.

<div class="list">

  <a class="item item-icon-left" href="#">
    <i class="icon ion-email"></i>
    Check mail
  </a>

  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-chatbubble-working"></i>
    Call Ma
    <i class="icon ion-ios-telephone-outline"></i>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-mic-a"></i>
    Record album
    <span class="item-note">
      Grammy
    </span>
  </a>

  <a class="item item-icon-left" href="#">
    <i class="icon ion-person-stalker"></i>
    Friends
    <span class="badge badge-assertive">0</span>
  </a>

</div>

try it"

Buttons list

Use item-button-right or item-button-left button on the class list items.

<div class="list">

  <div class="item item-button-right">
    Call Ma
    <button class="button button-positive">
      <i class="icon ion-ios-telephone"></i>
    </button>
  </div>

  ...

</div>

try it"

With Avatar List

Use item-avatar create avatar with a list:

<div class="list">

    <a class="item item-avatar" href="#">
      <img src="venkman.jpg">
      <h2>Venkman</h2>
      <p>Back off, man. I'm a scientist.</p>
    </a>

    ...

</div>

try it"

Thumbnail List

Thumbnail item-thumbnail-left class to add the left-aligned, item-thumbnail-right class is used to add a thumbnail on the right alignment.

<div class="list">

    <a class="item item-thumbnail-left" href="#">
      <img src="cover.jpg">
      <h2>Pretty Hate Machine</h2>
      <p>Nine Inch Nails</p>
    </a>

    ...

</div>

try it"

Embedded list (inset list)

We can be embedded in the container among a list, the list does not display the full width.

Inline style list is: list list-inset, with a general list of difference is that it sets the margin (marign), similar to the tab.

Embedded lists are no shadows, the effect will be even better when scrolling.

<div class="list list-inset">

    <div class="item">
      Raiders of the Lost Ark
    </div>

    ...

</div>

try it"