List View

See the Pen by Ionic (@ionic) on CodePen.

The List is a widely used interface element in most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

Both the list, which contains items, and the list items themselves can be any HTML element. The containing element requires the list class and each list item requires the item class. Ionic also comes with pre-built Angular directives to make it easier to create a complex list.

Using the ion-list and ion-item directives make it easy to support various interaction modes such as swipe to edit, drag to reorder, and removing items. However, if you need just a simple list you won't need to use the directives, but rather just use the classnames. This demo is a simple list without using the directives.

Usage

<ion-list>
  <ion-item ng-repeat="item in items" item="item">
  </ion-item>
</ion-list>

Lists have many options that can be configured and events that can be handled:

Attribute Type Default Description
on-delete function(item) Called when an item is deleted.
on-reorder function() Called when an item is reordered.
show-delete boolean false A true/false value which toggles each item's delete button.
show-reorder boolean false A true/false value which toggles each item's reorder button.
can-delete boolean false A true/false indicating if an item can even be deleted or not. If on-delete is set then this value will default to true.
can-reorder boolean false A true/false indicating if an item can even be reordered or not.
can-swipe boolean false A true/false indicating if an item can even be swiped to reveal option buttons.
delete-icon className ion-minus-circled The class name of the icon to show for all deletion items. The default ionicon is ion-minus-circled.
reorder-icon className ion-navicon The class name of the icon to show for reordering. The default ionicon is ion-navicon.
item-type className The classnames which are available for item, check out the css component docs for more info.
animation className An animation class to apply on the list for animating children.

List Items

List items make up the bulk of lists. List items can be swiped, reordered, deleted, and selected. They support hidden option buttons that are exposed after swiping, and trigger events on deletion and selection.

List items also support embedded form elements and right-hand icons.

The content specified in the item content area will be the main content of the displayed item. Make sure to add an icon at the end if you want a right-handed icon.

Attribute Type Description
option-buttons array Buttons is an array of objects specifying the hidden buttons show underneath an item when swiped. The format of each button object is:
{
  text: 'Edit',
  type: 'button',
  onTap: function(item) {
    ..
  }
}
on-delete function(item) Called when an item is deleted by the user.
can-delete boolean Whether this item can be deleted by the user.
can-reorder boolean Whether this item can be reordered.
can-swipe boolean Whether this item can be swiped to expose the hidden buttons.
item-type className The classnames which are available for item, check out the css component docs for more info.