ionic list

List is a widely used interface element and is used in almost all mobile apps.

The list can be basic text, buttons, switches, icons and thumbnails, etc.

List items can be any HTML element. The container element requires the list class, and each list item requires the item class.

ionList and ionItem can easily support various interaction methods, such as sliding editing, drag sorting, and deleting items.

Basic usage:

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

List separator

We can use the item-divider class to create a separator for the list, by default Below, list items are distinguished by different background colors and font boldness, but you can also customize it easily.

<div class="list">

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

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

  ...

</div>

List with icon

We can specify the icon on the left or right side of the list item.

Use item-icon-left to set the icon on the left and item-icon-right to set the icon on the right. If you need icons on both sides, just add both classes.

In the following example, we use the <a> tag in the list items to make each list item clickable.

When a list item uses <a> or <button> elements, if no icon is added to the right, an upward arrow will be automatically added.

In the example, the first item only has icons on the left, the second item has icons on both sides, the third item has icons on the right (and item-note), and the fourth item has a badge element. .

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

Button List

Use the item-button-right or item-button-left classes to place buttons in 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>

List with avatar

Use item-avatar to create a list with avatar:

<div class="list">

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

    ...

</div>

Thumbnail list

The item-thumbnail-left class is used to add left-aligned thumbnails, and the item-thumbnail-right class is used to add right-aligned thumbnails.

<div class="list">

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

    ...

</div>

Inset list(inset list)

We can embed the list in the container, and the list will not display the full width.

The style of the inline list is: list list-inset. The difference from the regular list is that it sets margins (marign), similar to tabs.

Inline lists have no shadow effect, and the effect will be better when scrolling.

<div class="list list-inset">

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

    ...

</div>