ionic tutorial - Basic list item syntax in ionic framework - ionic framework - ionic 2 - ionic creator - ionic development
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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>Click below button to copy the code. From wikitechy - ionic tutorial - ionic framework tutorial - team
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.
Example
<ion-list>
<ion-checkbox ng-model="choice1">Choice 1</ion-checkbox>
<ion-checkbox ng-model="choice2">Choice 2</ion-checkbox>
</ion-list>