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 –

<ul class="list">
   <li class="item">Item 1</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
   <li class="item">Item 4</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
   <li class="item">Item 7</li>
</ul>

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

List Divider Example

Here is an example of using dividers in lists is-

<ul class="list">
   <li class="item item-divider">Item Divider</li>
   <li class="item">Item 2</li>
   <li class="item">Item 3</li>
    <li class="item item-divider">Item Divider</li>
   <li class="item">Item 5</li>
   <li class="item">Item 6</li>
   <li class="item">Item 7</li>
</ul>

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

List Icons Example

Here is an example of using icons in list-

<ul class="list">
   <li class="item item-icon-left"><i class='ion-chatbubble-working'></i></li>
     <li class="item item-icon-left"><i class='ion-email'></i></li>
     <li class="item item-icon-right"><i class='ion-ios-telephone'></i></li>
</ul>

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

Add Comment

📖 Read More

• 1. Ionic Cards
• 2. Ionic Form
• 3. Ionic Toggle
• 4. Ionic Checkbox
• 5. Ionic Radio Button

• 6. Ionic Range
• 7. Ionic Select
• 8. Ionic Tabs
• 9. Ionic Grid
• 10. Ionic Colors