Tutorialsplane

Ionic List


Ionic List : Lists are used to display data in very simple format. It can be used to display data in various format. It can contain simple text to rich content icons, buttons, thumbnails and multimedia etc.
Ionic provides very powerful list components which supports various modes such as reorder, swap to edit etc. We are going to explain the ionic list with example and demo.


Ionic List

Class .list is used to create list in ionic. Here is very basic example of ionic list –

Ionic Basic List Example-

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
  • Item 6
  • Item 7

Try it »

If you run the above example it will produce the following output-

Ionic List Divider

You can add dividers in ionic by adding the class item-divider

List Divider Example

Here is an example of using dividers in lists is-

Ionic Basic List Example-

  • Item Divider
  • Item 2
  • Item 3
  • Item Divider
  • Item 5
  • Item 6
  • Item 7

Try it »

If you run the above example it will produce the following output-

Ionic List With Icons

You can add icons in list. You can add position of icons by adding the item-icon-right and item-icon-left

List Icons Example

Here is an example of using icons in list-

List using icons-

Try it »

If you run the above example it will produce the following output-

Ionic Tutorials

Ionic Components

Javascript Components