列表/List

The List is a common and simple way of displaying... that's right, a list. This is a widely used interface across most current mobile OS's, and can include content ranging from basic text all the way to buttons, toggles, icons, and thumbnails.

The list view is a very versatile and powerful component. List views support various interaction modes such as editing, swipe to edit, drag to reorder, and pull to refresh.

For more power you can use Ionic's AngularJS directives. Check out the AngularJS list docs to get more detailed information.

<ulclass="list"><liclass="item">       ...     </li></ul>

* For a more extensive overview on Lists, read AngularJS List Docs

List Dividers

List items can also be dividers to organize and group the list items. Use the item-divider class to create a divider for any child element of the list. By default list item dividers will have a different background color and font-weight, but this is easily customizable.

<divclass="list"><divclass="item item-divider">     Candy Bars   </div><aclass="item"href="#">     Butterfinger   </a>  ... </div>

List Icons

Lists can have icons assigned either to the left and/or right side of each list item, and the alignment classes should be assigned to each item element. Icons can easily be added to any item by using either the built in Ionicons, or any custom font-pack you choose. Learn more about icons.

Use item-icon-left to line up the icon to the left, and item-icon-right to set the icon to the right. When a list item has an icon on both sides then both classes will need to be applied.

This example uses an <a> element for each item, which allows the entire list item to be tappable. If the item is an <a> or <button> element, and no icon has been added to the right, then a small right arrow will automatically be added.

In the example, the first item only has a left aligned icon. The second item has both left and right side icons. The third item has no a right side icon assigned (whichs defaults to the right arrow). Additionally, the third item also adds an item-note. The fourth icon has added a badge element.

<divclass="list"><aclass="item item-icon-left"href="#"><iclass="icon ion-email"></i>     Check mail   </a><aclass="item item-icon-left item-icon-right"href="#"><iclass="icon ion-chatbubble-working"></i>     Call Ma     <iclass="icon ion-ios-telephone-outline"></i></a><aclass="item item-icon-left"href="#"><iclass="icon ion-mic-a"></i>     Record album     <spanclass="item-note">       Grammy     </span></a><aclass="item item-icon-left"href="#"><iclass="icon ion-person-stalker"></i>     Friends     <spanclass="badge badge-assertive">0</span></a></div>

List Buttons

Use item-button-right or item-button-left to place a button within an item.

<divclass="list"><divclass="item item-button-right">     Call Ma     <buttonclass="button button-positive"><iclass="icon ion-ios-telephone"></i></button></div>  ... </div>