Hello, in this ionic programming video, we are going to look at the list. css component list is a common way of just displaying data. That's pretty much it, there's not much more to say. So without further ado, let's get into a warm actually first gonna do is just run this so the simulator is running. So yeah, fine, I'm happy with that. Now we can continue doing what we're going to do.

Okay, so first of all, let's create an unordered list. This will have a class of list. And then in here we're going to have a list item. And now these lists are ultimately going to have a class of item and I'm just simply going to call it one. I'm going to copy and paste this And change this to free and or save that. Now if I open up my terminal, I CD, desktop CD to only, please awesome now just build it for iOS, build iOS, you can run it, build it, test it on whatever device you want.

I'm going to be building it and running it in an iOS simulator. It's just easy to show the result to you. Okay, okay, so that's all running that. So let's just rerun this in our simulator. So there we go. We have a simple left.

It's that simple. We're going to advance on it a little bit more. You can also do something called a lift divider. which essentially is a great way of dividing different sets of items. So imagine if origin one and two was part of a group. And this was part of a number group.

That's a great way of pointing. You can call it groups essentially. So to create a divider, you just do this do a list item. And for the class, we want all you term or term dash binder. And now I'm just going to call it group one. Copy and paste this for this group to save it.

Build our application again. We run it in the simulator So here we go, we actually have different groups. Now, you might be wondering why this is sort of overlapping the status boys is just because we deleted in one of the starting videos going to setting up our project, we deleted pretty much all the code from our project, you probably would just manipulate it accordingly. So you won't really have this issue if you're doing a serious project. So the next list feature we're going to show you is list icons. So what we're going to do, we're going to add an icon to item two.

And to do that, just put in our class of item icon, dash the nav, we want to set the position on the left if you wanted it on the right, you simply change left to right. And now in here Alright, class Oh, econ ion dash. What's up put, I'm going to put the email icon if you want more information about the ionic icon, pack, just google ionic icons and you'll get a bunch of different classes that you can use. It's really cool because they're all built in and they look fantastic. And for this, I'm actually going to rename it so we say email so it's actually relevant to what it is. Showcasing in terms of the icons are now let's just build the project.

We run the project there you go. We now have an icon. That is Think that has made the user experience or the actual interface look a lot better now. And especially when you start having other icons, either it turns on name better, you can have icons on the left on the right as well. Very self explanatory because we've put the icon before the module wants to be on the right for it afterwards. And also add the item dash icon, dash, right clap if you wanted it both ways.

So that's just a great way of adding icons. The next thing we're going to look at is adding a button within one of our list items. So let's add it to a term. Sorry, two item one, for example. So we're going to anchor the button to the right so we need to put item dash button dash I think you guessed it, right. If you want that on the left, simply change that to left and for this What we're going to do is just add a go to have a class of return.

For the styling, I'm just going to put button.com if you want more information about buttons check out that video is all explained everything that you need to know about buttons in ionic. And in here, I'm going to do is just add an icon. This is going to have a class of icon, ion dash, iOS dash telephone again, this is just a certain icon class. If you want more information, check out the ionic icon. Pack website to change this to cool Save that we build our project. We run it in our simulator.

There we go, we have a pattern with in our list, which is fantastic. So that's a great little thing that you do. And you could have multiple buttons as well. Very similar to having an icon you can mix and match icons and buttons as an extra task. I actually recommend doing that mixing and matching the features that I'm showing you because it's a great way of advancing your knowledge. So the next thing we're going to look at is item avatars, which is essentially displaying a circular image, the image itself or the source image doesn't have to be circular.

The styling handles all of that, which is fantastic. So this one Let's do for item three, because I'll leave the others because they're looking pretty good at the moment, what I'm going to do is add a class of item dash avatar. In all fairness, you don't actually have to list items, these could be anchor tags, and maybe you want them to refer to something else. This owner in order list could be a div, as long as you have these classes, everything should work fine. Again, experiment with because that's the best way of learning and that's the best way of knowing how it all works. So we've got our return dash avatar class, and inside here, I'm going to add image equals Oh, get rid of this.

Changes to h2. So you can actually see Hi, this is I'm gonna call this heading. Now put a paragraph tag on a call list. I'm going to call this more information and in the source, I'm going to I have Google open up, just got a picture of Gabe, you're going to copy the image address. Save that. Paste that, save it, build our project.

We run it in a simulator might get a warning and the image might not load potentially. Nope it loaded. So that is fine. I must have already added the information In the info palace, which allows us to get external sources. So there you go, it's a great way of displaying an avatar, this could be maybe the name of a person, and the morning from information could possibly have the email address of the person. So it's a great way of creating some sort of contact list.

Now we're going to show you how to do an item form now. Very, very similar, but the biggest difference is it's not rounded. So what we're going to do is, for this list item right here, I'm going to put a class of item form nailed down. Now, we want to set it to the position so it's left or right only 32 left, not left, left. And in here, we're going to have an image Need to close it off but it's just a habit from x HTML. For the source, I'm actually going to use the exact same image so you can see the difference in the code.

Copy that. Paste it and for the text on to our input, Gabe Newell p tag never really seen free save that and now build our project we run this in our simulator So there you go. That is the difference. The icon is slightly bigger and it isn't rounded. So you get a variety of methods to actually style your application. The laughing we're going to show you is an inset list with J, which is a list that doesn't span the full width of the container, which is a great way of making it look on and say cool, but what word I'm looking for many different all you do is put a list gash insect, save that need to build the project, sorry.

Rerun this simulator and there we go. As you can see didn't spend the full width of the parent container and he actually looks really cool. Obviously that down to the way you want your interface to look, it's totally customizable. So that's it for this video very simple stuff. If you have any questions, feel free to post them on sonar learning Dakota UK, which is our free education platform. There'll be a link in the description to that they'll be another link in the description to the source code from this video and all the other videos in this series.

If you like this video, please give it a thumbs up. Hit that subscribe button and leave us a comment. And as usual, thanks for watching and I hope you have a great day.