ionic list

ionic list

Lists are a widely used interface element that is used in almost all mobile apps.

Lists can be basic text, buttons, switches, icons, thumbnails, and so on.

List items can be any HTML element. Container elements require a list class, and each list item requires an item class.

ionList and ionItem can easily support a variety of interactions, such as sliding edits, dragging sorting, and deleting items.

Basic usage:

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

Try it out . . .

List separator

We can use the item-divider class to create separators for lists, which by default are distinguished by different background colors and font bold, but you can also easily customize them.

<div class="list">

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

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

  ...

</div>

Try it out . . .

List with icons

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

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

In the following example, we've used the hashtag in list items to make each list item clickable.

List items are automatically added with the upper arrow number if the icon is not added to the right when using the element of the .

In the example, the first item has only the left icon, the second has an icon left and right, the third has a right icon (and the note item-note), and the fourth 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>

Try it out . . .

The list of buttons

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>

Try it out . . .

Lead like a list

Use item-avatar to create a list of leading images:

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

Thumbnail list

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

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

Inline list (inset list)

We can nest a list in the container, and the list does not show the full width.

The style of the embedded list is: list-inset, which, unlike regular lists, sets margins (marign), similar to tabs.

Inline lists have no shadow effect, which works better when scrolling.

<div class="list list-inset">

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

    ...

</div>

Try it out . . .