Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.5 Ionic List Components

List components make it easy to lay out repeated data or components. I'll show you how in this lesson.

2.5 Ionic List Components

Hello everyone, I am Reginald Dawson. Welcome back to the Get Started with Ionic Creator Course for Plus. The last set of components that we will look at are the list components. One of the things that Ionic is good at is displaying lists of data. The list components allow us to lay out our data in one of a few different styles. The first component we will look at is the list divider. This allows you to section off your list and acts as a heading inside of our list. The list divider has the content property which is the text that will appear in it. The container list item allows you to place other content inside of your list. All you have to do is drag and drop. The container list item just has classes that can apply to it and it is very similar to the regular container. The only exception is that the container list item is configured to work with the list. Now, the list item just accepts standard plain text content. We can build up our list by dragging in multiple list items. We can also add a list with three items already included if we know we will add multiple items to our list. We can also drag our items around and connect it to the other list and make it one big list. We can now select the entire list and look at the properties of the list as a whole. We can also add classes here and make the list full width. With the paid version, we can also add the Lead and Reorder buttons to our list. Now if you look at the individual list items, we can see their properties. We can make the list item a link, the same way we have done with other components. In the Style, we have a type where we can change the item style to another one of the choices. Instead of showing them here, we will go through them one by one in a moment. The text of course will appear in the list item. The right side allows us to add some text and an icon to the right of our item. We can also use the accessory setting to change the icon to gray and shrink it down the master text. Finally the swipe button will allow us to add some buttons that will appear when we swipe on our list item. Then the thumbnail list item adds a small image to the item. The settings are mostly similar to the standard list item. We can also change the type like we can in the standard list item. We can upload an image by clicking on the upload thumbnail button. Now the content is the first line of text. Similar to what we have seen before, the first line will have an ellipsis as the text overflows. This will also happen with the second line unless we enable word rat. We also have the right side here except we can not add text, we can only add an icon. We can only use accessory here as well to turn the icon gray and shrink it. We can also add swipe buttons to the thumbnails list item as well. Then the icon list item allows us to create an list with an icon on the left hand side. The content, of course, is the text that will appear in the icon list item. We can also add a right side icon and text if we'd like. Then finally we have the avatar list item. We can upload an avatar image, which will be smaller than the thumbnail image. The idea is that you use some sort of head shot or icon to represent a person's avatar, but this is not required. You can upload any kind of image and it'll be cropped to fit the circular area. We can also add text here as well as a second line that can wrap if we like. We can also add an icon on the right and swipe buttons. Now one thing to understand about these list items is that we can mix and match them to build up the list that we like. You now know how to use the various elements to build our app in Ionic Creator. In the next video, we will learn how to theme and style our app.

Back to the top