Ionic List

Ionic List

The ionic list is created of several rows of items that can contain text, buttons, thumbnails, keys, icons, and more. Lists are one of the essential components in any web or mobile app. It usually contains items with similar data content, such as images and text. Both the list that contains the items and the list items can be any HTML component.

Ionic lists support different interactions, such as the swiping item to reveal options, drag to rearrange items within the list, and delete items. We can access the lists using the standard <ion-list> element.

Creating Ionic List

Each list is created with two items. When you want to create the main list, the <ul> tag must contain the assigned list class, and the <li> tag will use the item class. Another interesting thing is that you don't even need to use <ul>, <ol> and <li> tags for your lists. You can use any other component, but the important thing is to add lists and classes of items correctly. In Basic usage, it is by default, all lists will be designed with divider lines.

The given syntax shows how to create a list in the ionic framework.

 
  
 item1 
 item2

Output: After executing this code, you will get the output, as shown below.

In the Ionic framework, there are different types of lists.

List Header
List Icon
List Dividers
Basic Lists
Inset Lists
Multi-Line List
Avatar List
Thumbnail List
Sliding List

List Header: Every ionic list can add a header at the top of the list. By using the <ion-list-header> component, you can add a list header.

Example: The below example shows how you can use the list header in the ionic application.

 
   
   
  Lists 
   
   
   
  
  Header
  A  
  B 
  C

Output: After executing this code, you will get the output, as shown below.

List Icon: Include icons to the list provides a guide to the content of every item. We can also adjust the icon size, small or large. By default, the icon is small but can be enlarged using the large property. There is a <ion-note> component, which is a text component used as subheadings that provide more information.

Example: The below example shows how to add the icons in the ionic application.

  
   
   
  Lists

Output: After executing this code, you will get the output, as shown below.

List Dividers: To divide groups of items, use <ion-item-group> in place of <ion-list>. Use the <ion-item-divider> elements to divide the group into several sections.

Example: The below example shows how you can use the list dividers in the ionic application.

   
 
   
  Lists 
   
   
   
  
    
  
  A
  Apple
  Anaconda
  Acid
  B
  Banana 
  Bread
  Bank
  C
  Chart
  Character
  Court

Output: After executing this code, you will get the output, as shown below.

Inset Lists: By default, the list does not have an external margin. If you need a list to fill a set, you can add the inset property to the <ion-list> component.

Example: The below example shows how can you use inset with <ion-list-header> and <ion-list> component.

  
   
   
  Games 
  Pubg 
  Militia 
  Temple Run 
  Ludo
  Chess
    
   
   
  Games 
  Pubg 
  Militia 
  Temple Run 
  Ludo
  Chess

Output: After executing this code, you will get the output, as shown below.

Multi-line list: Multi-line lists are the same as regular lists, but that items contain multiple lines of text. When the <ion-item> component contains multiple headers or paragraph elements, its height will automatically expand to fit new lines of text.

Avatar List: Item avatars show a larger image than an icon, but smaller than a thumbnail. To use an avatar, add a <ion-avatar> element within an item. The avatar position can be set using the item-start and item-end property.

Example: The below example shows how you can use the avatar list in the ionic application.

  
   
   
  Avtar
   
   
   
   
    
   
  Avatar 
   
   
   
   
  Avatar

Output: After executing this code, you will get the output, as shown below.

Thumbnail List: Item thumbnails show an image that occupies the entire height of the item. To use a thumbnail, add a <ion- thumbnail> component within an element. Thumbnail position can be set using the item-start and item-end properties of the item.

Example: The below example shows how you can use the thumbnail list in the ionic application.

Output: After executing this code, you will get the output, as shown below.

Sliding List: Sliding elements can swipe left or right to reveal a set of hidden buttons. To use a sliding item, add a <ion-item-sliding> element inside of an <ion-list> element. Next, add a <ion-item-options> element within the slider to accommodate the buttons.

By default, the buttons are on the right side. It means when the sliding item is swiped from right to left, and the options are displayed. Set the side attribute to "start" on the < ion-item-options > element if you need to swipe the option from left to right side.

Example: This example shows how you can use the sliding list in the ionic application.

 
   
   
  Sliding List 
   
   
   
   
   
 
  
  
  Item 1
  
  
  Unread
  success
   
  
  
  
  Item 2
  
  
  Unread
  read

Output: After executing this code, you will get the output, as shown below.

When you swipe the item 1 from left to right, the following output shows in your browser.

← Prev Next →