The list component is probably one of the most common components that you'll use in your app. We're going to start this video by using a list component for a navigation menu. Currently this draw is completely useless. So let's add something there.
Source, layouts, main layout. That's going to jump us into the skeleton of the app. And now we can hook into the draw, which is right here inside of this cue draw component. So let's just type the word test in there to check we're in the right spot.
And we are. Now let's build our list. Queue dash list. And we need items in this list.
Queue dash item. And to give us flexibility, Quasar goes a few levels deeper. Queue dash item dash section. We can also add a queue item label.
And if you're getting confused now, that's totally fine. This is a lot of nesting. We're going to discuss what these levels mean when we actually start building out more complex lists. So for now, all we need is a list with an item and an item section.
Let's set that equal to home. So this is a link that will take us to the homepage. js. We have a path for our routes, but we don't have a name for our routes.
I like to use named routes. because it means I can change the path later on without the app's links breaking. So let's set this one equal to home. And then let's set this one equal to friends.
Save it back into our main layout. And then over here on the item, we can say colon two. So this is just like router dash link, and then using two, basically Quasar proxies two to view router behind the scenes. So now we can say cue item two and we'll set that equal to home.
Just by doing this, we now get a nice hover effect. And if that link is active, it's going to come up blue. Now for this app, we also need to set it equal to exact. Otherwise this route is going to be matched on every single link.
I'm not going to go into why in this video, but I have included a link for the view router docs that talk about what exact means here. Okay. So let's save that. We now have a link to home and we'll copy paste it down to create a link to friends.
Friends and we'll call that friends. Let's see if it works. Now we can go to our friends page and we can go home. Cool.
Now let's use this page to create a list of friends. Pages, friends page. And now I'll hide the file browser and we can go ahead and get started. First up, we want our list of friends.
So if I do control two, jump into the index page, we're just basically going to copy paste, use local storage and that code that allows us to get all of our friends. So this one as well that says const friends is equal to use local storage friends, closing this out. And now we can whack this in a pre-tag. And there's all of our friends.
Let's also get rid of the padding on the page, just so when we create our list, it fits up snugly in the corners. All right, let's start simple. Coming up here, we'll create a q-list, which will have a q-item, which will have a q-item-section. Let's just put the word test in there to see if it works.
And it does. Doesn't look like anything yet, but that's a start. Now currently friends is an object. However, we want to turn it into an array so it's easier to play around with and display in our list.
Turns out we can easily do that by saying object dot values, friends. And essentially what that does is rather than having an object with keys, it converts it to an array. So this would be an item in the array. This would be an item in the array, et cetera.
So let's save that. And you can see we've now got an array of data that we can play around with. values, friends. If I save that, we now get an error.
A linter is telling us we need a key. Thank you, linter. id. That's how we can uniquely identify that friend.
name. And now we have a list that's starting to look like something. In the rest of the video, we're gradually going to flesh this out to turn it into something beautiful using all of the data that we have here. First of all, I want a border on the left side that is the color for that friend.
We're going to use a style tag for that. Some people hate using style tags. If you don't like it, you can find another way, but I think it's totally fine. when you're doing small things like this.
So we can now do border left, and then we could say, for example, six pixels solid, and then give it a colour. Okay, so that gives it a border. Now we can swap out this colour for the friend's colour. Change this to a template string, Ctrl D, backtick, dollar, curly braces, and then we can whack in their friend dot colour.
There we go. Starting to look good. Now I don't like that there's no line between them. I'd rather have them separated in this example.
So let's come up to the list and say separator. Okay. That's a little bit better. How about we have an avatar at the start.
So, you know, in contact apps, how you can scroll through your contacts and often you'll have a little circle with the first letter of that person's name. Let's go ahead and build that. So we'll come in here and we'll add another Q dash item dash section. So you can think of sections as left to right parts of the list.
So for example, if I just put in the word first here, that's our first section, but see how they've kind of separated from each other? To prevent that, we want to tell this section that it is on the side by saying side. And it's the same with the right side. So we can do q dash item dash section dot dot dot.
And that's not really where I want it. I want it on the side. So we can come up here and say side. This is one of the important things to know about Quasar lists.
Using a combination of QItemSection side and then QItemSection without the word side in it. Okay, so your outer ones should have side and that makes them display really nicely in your list. It ensures that it all aligns correctly. Okay, another thing we can do is say avatar.
This is kind of like saying side, but it's specifically for adding an avatar in your list. And now we can do Q-Avatar and put a letter in there. So for example, El Felugu. Okay, that looks all right.
How about we use our color for the background there? We can go style is equal to, make it an object and then say background color. color. So that works.
Next, let's make the text white. So how about this? Class is equal to text dash white. And then we want that letter to be correct.
So now we can say friend dot name, and then we'll just grab the first letter in that name. Okay, I reckon this is starting to look good. Now you might remember earlier, we talked about using a Q item label. So here, we've got the friend's name.
But what if we want two things stacked one above the other? So maybe at the top we've got the name and then under that we have the email. In that case, we can add a Q-item-label. Let's throw the friend name in there, save it, doesn't do anything.
But if we add another label in there, it's going to make sure they stack correctly. So we'll set this equal to email. And it also means we can add a little bit of styling in there to make it look a bit better. So Quasar gives us some default ones that look nice.
And the one I want to use here is caption. So let's say caption. Cool. I think that looks pretty good.
Next, we can start adding some stuff to the right side. And I'm thinking we can say whether or not they're human or a dog. So we could do that using icons. And then maybe we can also have a chip that shows the operating system that they use.
So first, let's do that icon idea. Q dash icon. We'll start simple by giving it a name equal to MDI. And I think there's one called human.
Yeah, there we go. Human. Now, how about this? We can use a ternary operator by saying friend dot is underscore human.
Remember we have that variable that says whether or not they're human. Now, if that's true, we'll give it the MDI human icon. Otherwise, we can give it the MDI dog icon. So no, this doesn't support cats, unfortunately, but of course you could extend this functionality if you wanted to include other animals.
So there you have it. Next, let's add that chip in that shows the operating system. And this is going to allow me to show you a really cool pattern that I often use inside of lists. So we have three operating systems here and that operating system needs a few different things.
So I'll show you what I mean. First of all, it's going to need a label. such as Windows. It's also going to need a color such as blue.
And by the way, we can wrap all of this in a div, Control Shift P, wrap with abbreviation, div, enter. That's going to make it align nicely. We'll also want to set the text color equal to white. And I also want to have an icon in here as well.
So icon is equal to MDI, and I believe there's one for Microsoft. There we go. So there's a few bits of information that we need to know about the operating system. We need to know its label, we need to know its color, and we need to know the icon to use.
We're going to map all of those details with an object. So first of all, let's say const OS details map. Now let's do one first. Let's start with windows.
And for windows, we want to label equal to windows. It's got an icon as well. So let's do that. Icon is equal to MDI Microsoft, and it's got a color which is blue.
So let's say the color is equal to blue. So now we can say OS details map, Windows, that would be a string. And then we can say dot color or icon or label. We can easily access all the information we now need.
in order to display that operating system correctly in the chip. This is a really cool pattern. I use it all the time and I think you're going to love it. So let's add another one here by copy pasting that down a couple of times.
And the next one is going to be Mac, MDI, Apple. And for the color, I'm going to choose gray. Next, we've got Linux, Control-Shift-D, Linux. icon, MDI, I think there's one for Linux as well.
Yeah, there we go. Linux. And let's set that one equal to black. Now we've got an easy way to access all of the details for each OS.
So double clicking on that and copying it, scrolling down, let's use that information here. Colon, OS details map. We can now grab the friends OS, friend. operating system.
I should have shortened that to OS. And then dot label. Let's see if that works. Okay.
So now all the labels come through and we can easily just copy paste this concept. Copy colon for the color, paste dot color icon as well. Paste and then dot icon. And there we go.
How cool is that? Let me just do a couple of touch-ups here. We'll remove the pre-tag at the bottom. And if I scroll up on the list, let's also make it fully boarded.
And we can do that by saying boarded. And that just means the bottom here will get a border. Saving it. And I've put that on the item.
I should have put it on the list. There we go. And there you have it. We have a beautiful list of all of our friends.