All language subtitles for 15. Lists Overview

We've finally gotten to the very last point for finishing up our header we've made our header responsive

and are correctly displaying our set of tabs for the desktop version and our draw icon for the mobile

version.

We've only set up the bare bones of the draw however and a still doesn't have any content inside or

any actual way for our users to navigate.

This is exactly the case where you would want to use the material UI list component the list component

is extremely powerful and is probably one of the most comprehensive components in a material UI.

In my opinion in the way that we'll use it here really just scratches the surface of what it's actually

capable of so of course before we actually dive into setting that up in our own application.

I'm going to walk you through all of those different options that material UI provides to us so that

you're aware of what you have available to you.

When you go to work on your own projects here we are at the material UI documentation page under components

data display and lists.

And here you can see an example of a simple list at the bottom.

I'm sure you're all familiar with what the word list means and I'm sure that you've probably seen examples

of these and applications you've even used today now an important thing to notice here is this line

right here where it tells us there are lists in material UI can contain a primary and supplemental actions

and also can have icons and text.

So like I said this is a versatile component that really allows you to pack in a lot of functionality

if you use it correctly we'll see some more examples of what they mean by that.

Here in a second but for now let's just take a look at these simple lists that they have rendered here

and decode it necessary to get that working at the top are important imports here or the list item list

item icon and the list item text components.

These are the base components that are necessary down here where we are actually rendering the list

you can see the in similar structure with other material UI components.

We have an outer list component that is wrapping all of our list items so you'll remember our menu and

our menu items and how that was set up and even how the tab and tabs are setup is in a similar way each

list item then has a button prop which applies all the functionality of the button while maintaining

the correct styles inside of our list item.

We have the list item icon where inside of that they simply have the icon component rendered and then

inside of our list items still we have the list item text with a primary prop set to inbox.

This is going to render the words in box within a typography component with a certain default styles

you'll see an example below of where they also use the secondary prop instead to create secondary text

with its own respective styles.

So here it's just the list wrapping a list item which wraps our list item text.

So that's a pretty simple sandwich structure for setting up the components.

So I think that that won't be too hard to remember if we keep scrolling down below.

We'll find an example of a nested list and here how they're using the material UI collapsible components

which works similarly to a drawer to collapse or show different content.

Further down you'll see another example of lists and how they have used different avatars and icons

to create a folder looking effect and here below they have one of the most interesting pieces of the

documentation that I think we've seen so far that really allows us to visualize all of the different

properties that are available on our list component so here you can see that this is just text only.

And then here we have the icons and so that is using the list item icon.

And here they're using an avatar inside of the list item icon to create that circle background effect.

And here in this example they're now also using a secondary action to create this icon.

If you view the source code here you can see if we scroll down to the bottom down where they have set

up the list item with the secondary action.

All they're using to do that is an actual list item.

Secondary action component and inside of there they simply wrap the icon button which wraps the delete

icon giving us this extra little toggle selector or whatever you'd like to call that.

Now what makes this example even cooler is that we can now customize it and you can see what all these

different options look like.

If we then added the dense prop so now you can see that all of them are much tighter there's less open

space and it just has a more condensed dense look which comes from using the secondary prop on the list

item text component so if you want to mess around with this for a while until you really feel like you

understand how all these components are affecting the different variants and all the different options

that you have but we'll just keep moving on.

And here they give us an example of a selected list item which we are actually going to implement because

we want to still be able to keep track of which tab we are selected.

Even if the TAB is within the draw if we go ahead and take a look at this we can see that they are actually

using the same selected prop similar to what we used on the menu items component.

So that shouldn't be too hard to set up either.

If we continue further down we can see the here when they are displaying a lot of items that have multiple

elements needing to be aligned they recommend using the inline items flecks start prop but since ours

are just text I don't think we really need to worry too much about that.

And here they show you how you can actually use checkboxes to create interactive lists that allow the

user to perform different sets of actions here they also have a secondary action setup which you could

imagine performing any other sort of operation the example below shows that they can use the checkbox

on either side.

See as the secondary action or as the primary action using the list item icon and passing in the checkbox

component instead of an actual icon below.

They show us an example of how you could create a really familiar settings screen allowing the user

to toggle common options and pair the descriptions with icons that look appropriate as well.

This helps create a very clear and convenient indication to the users of the current state of their

application.

You can really see just how flexible the basic list component is when you then compose it with all these

different icons and actions using the built in the material UI components nearing the end here.

The pinned sub header list shows an example of.

I'm sure you've seen this before where the top a header stays where it's at until another header pushes

it out of the way where it continues to do the same thing.

They say here that this actually is not implemented by all browsers and it will default to disabling

the effect.

We're not supported but is still a nice cool little trick that they've added.

We also have inset lists so you can see here instead of as the top example being all the way against

the edge here they have this gap which you could use to indicate nesting or other types of association.

And lastly we get to the virtual list and this is an example using another library actually called react

window which allows a very large number of items to be rendered without severely affecting performance.

And so this is extremely useful if you ever find yourself in an example where you do have to render

a very large number of items but thankfully in our application we only have 6 tabs and so virtualizing

the list definitely is not necessary.

These are all great options to be aware of though and you can see that just like every other component

we've looked at so far the material UI list component is equally as powerful if not even more so than

some of its counterparts we've seen with its ability to add extra actions and icons all very easily

using nested components that manage all of these styling and alignments for you.

I think this makes it extremely easy to get up and going and get to a great starting point where you

can then launch off and customize it fully to your needs.

This has been our pattern so far and so let's continue by now integrating the list within our draw and

customizing it for our own application.