ionic-framework Ionic CSS components Basic list item syntax

Example

Almost every application has some kind of a list. Ionic has it's own build-in ready-to-go list item CSS declarations to make it easy to do lists inside your application. You can either use HTML elements and declare a class for the or use the directive ion-list to make them. Example of a directive is at the bottom.

Basic list item CSS syntax:

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

List with dividers:

<div class="list">
  <a class="item" href="#">
    List item
  </a>
  <div class="item item-divider">
    Divider that looks a bit different from items
  </div>
  <a class="item" href="#">
    Another list item
  </a>
</div>

List items with icons:

<div class="list">
  <a class="item item-icon-left" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left
  </a>
</div>

You can also set icons on both sides of the items with the following syntax:

<div class="list">
  <a class="item item-icon-left item-icon-right" href="#">
    <i class="icon ion-trash-b"></i>
    List item with a trashcan icon on the left and a briefcase icon on the right
    <i class="icon ion-briefcase"></i>
  </a>
</div>

An list item with button or buttons can be created like this:

<div class="list">
  <div class="item item-button-right">
    Item with a button on the right that has a clock icon in it
    <button class="button button-positive">
      <i class="icon ion-clock"></i>
    </button>
  </div>
</div>

It's also possible to create list items with avatars, thumbnails and inset which will create padding around the list items. Ionic also handles setting icons etc in list items by setting padding accordingly to the list items.

Ionic also has it's own directives for checkboxes, radio buttons etc. Here's an example of a checkbox list with Ionic.

<ion-list>
  <ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
  <ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>