Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,180 --> 00:00:10,050
We've finally gotten to the very last point for finishing up our header we've made our header responsive
2
00:00:10,110 --> 00:00:17,790
and are correctly displaying our set of tabs for the desktop version and our draw icon for the mobile
3
00:00:17,790 --> 00:00:19,170
version.
4
00:00:19,290 --> 00:00:26,790
We've only set up the bare bones of the draw however and a still doesn't have any content inside or
5
00:00:26,820 --> 00:00:30,450
any actual way for our users to navigate.
6
00:00:30,590 --> 00:00:39,020
This is exactly the case where you would want to use the material UI list component the list component
7
00:00:39,020 --> 00:00:46,360
is extremely powerful and is probably one of the most comprehensive components in a material UI.
8
00:00:46,360 --> 00:00:52,550
In my opinion in the way that we'll use it here really just scratches the surface of what it's actually
9
00:00:52,550 --> 00:00:59,650
capable of so of course before we actually dive into setting that up in our own application.
10
00:00:59,650 --> 00:01:05,140
I'm going to walk you through all of those different options that material UI provides to us so that
11
00:01:05,140 --> 00:01:07,710
you're aware of what you have available to you.
12
00:01:07,740 --> 00:01:17,380
When you go to work on your own projects here we are at the material UI documentation page under components
13
00:01:17,890 --> 00:01:21,160
data display and lists.
14
00:01:21,160 --> 00:01:26,550
And here you can see an example of a simple list at the bottom.
15
00:01:26,660 --> 00:01:33,020
I'm sure you're all familiar with what the word list means and I'm sure that you've probably seen examples
16
00:01:33,020 --> 00:01:40,190
of these and applications you've even used today now an important thing to notice here is this line
17
00:01:40,220 --> 00:01:49,070
right here where it tells us there are lists in material UI can contain a primary and supplemental actions
18
00:01:49,250 --> 00:01:52,070
and also can have icons and text.
19
00:01:52,100 --> 00:01:58,490
So like I said this is a versatile component that really allows you to pack in a lot of functionality
20
00:01:58,490 --> 00:02:03,380
if you use it correctly we'll see some more examples of what they mean by that.
21
00:02:03,380 --> 00:02:08,600
Here in a second but for now let's just take a look at these simple lists that they have rendered here
22
00:02:08,870 --> 00:02:18,210
and decode it necessary to get that working at the top are important imports here or the list item list
23
00:02:18,300 --> 00:02:23,780
item icon and the list item text components.
24
00:02:23,830 --> 00:02:30,340
These are the base components that are necessary down here where we are actually rendering the list
25
00:02:31,480 --> 00:02:36,520
you can see the in similar structure with other material UI components.
26
00:02:36,520 --> 00:02:46,000
We have an outer list component that is wrapping all of our list items so you'll remember our menu and
27
00:02:46,000 --> 00:02:54,400
our menu items and how that was set up and even how the tab and tabs are setup is in a similar way each
28
00:02:54,400 --> 00:03:03,130
list item then has a button prop which applies all the functionality of the button while maintaining
29
00:03:03,130 --> 00:03:07,240
the correct styles inside of our list item.
30
00:03:07,240 --> 00:03:14,620
We have the list item icon where inside of that they simply have the icon component rendered and then
31
00:03:14,650 --> 00:03:23,050
inside of our list items still we have the list item text with a primary prop set to inbox.
32
00:03:23,070 --> 00:03:30,570
This is going to render the words in box within a typography component with a certain default styles
33
00:03:31,640 --> 00:03:39,230
you'll see an example below of where they also use the secondary prop instead to create secondary text
34
00:03:39,260 --> 00:03:42,530
with its own respective styles.
35
00:03:42,560 --> 00:03:48,630
So here it's just the list wrapping a list item which wraps our list item text.
36
00:03:48,710 --> 00:03:53,410
So that's a pretty simple sandwich structure for setting up the components.
37
00:03:53,450 --> 00:03:59,480
So I think that that won't be too hard to remember if we keep scrolling down below.
38
00:03:59,590 --> 00:04:08,470
We'll find an example of a nested list and here how they're using the material UI collapsible components
39
00:04:08,860 --> 00:04:14,680
which works similarly to a drawer to collapse or show different content.
40
00:04:15,770 --> 00:04:22,730
Further down you'll see another example of lists and how they have used different avatars and icons
41
00:04:22,730 --> 00:04:29,690
to create a folder looking effect and here below they have one of the most interesting pieces of the
42
00:04:29,690 --> 00:04:37,250
documentation that I think we've seen so far that really allows us to visualize all of the different
43
00:04:37,250 --> 00:04:46,390
properties that are available on our list component so here you can see that this is just text only.
44
00:04:46,390 --> 00:04:52,100
And then here we have the icons and so that is using the list item icon.
45
00:04:52,210 --> 00:05:00,050
And here they're using an avatar inside of the list item icon to create that circle background effect.
46
00:05:00,070 --> 00:05:07,420
And here in this example they're now also using a secondary action to create this icon.
47
00:05:07,630 --> 00:05:14,950
If you view the source code here you can see if we scroll down to the bottom down where they have set
48
00:05:14,950 --> 00:05:18,730
up the list item with the secondary action.
49
00:05:18,850 --> 00:05:22,750
All they're using to do that is an actual list item.
50
00:05:22,750 --> 00:05:29,920
Secondary action component and inside of there they simply wrap the icon button which wraps the delete
51
00:05:30,160 --> 00:05:36,610
icon giving us this extra little toggle selector or whatever you'd like to call that.
52
00:05:36,640 --> 00:05:42,850
Now what makes this example even cooler is that we can now customize it and you can see what all these
53
00:05:42,850 --> 00:05:44,410
different options look like.
54
00:05:44,410 --> 00:05:51,490
If we then added the dense prop so now you can see that all of them are much tighter there's less open
55
00:05:51,490 --> 00:06:01,120
space and it just has a more condensed dense look which comes from using the secondary prop on the list
56
00:06:01,150 --> 00:06:08,170
item text component so if you want to mess around with this for a while until you really feel like you
57
00:06:08,170 --> 00:06:13,360
understand how all these components are affecting the different variants and all the different options
58
00:06:13,360 --> 00:06:16,040
that you have but we'll just keep moving on.
59
00:06:16,150 --> 00:06:23,260
And here they give us an example of a selected list item which we are actually going to implement because
60
00:06:23,260 --> 00:06:28,090
we want to still be able to keep track of which tab we are selected.
61
00:06:28,090 --> 00:06:36,230
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
62
00:06:36,230 --> 00:06:42,990
using the same selected prop similar to what we used on the menu items component.
63
00:06:43,040 --> 00:06:45,690
So that shouldn't be too hard to set up either.
64
00:06:46,770 --> 00:06:54,510
If we continue further down we can see the here when they are displaying a lot of items that have multiple
65
00:06:54,510 --> 00:07:01,890
elements needing to be aligned they recommend using the inline items flecks start prop but since ours
66
00:07:01,890 --> 00:07:05,900
are just text I don't think we really need to worry too much about that.
67
00:07:06,030 --> 00:07:12,840
And here they show you how you can actually use checkboxes to create interactive lists that allow the
68
00:07:12,840 --> 00:07:20,740
user to perform different sets of actions here they also have a secondary action setup which you could
69
00:07:20,740 --> 00:07:27,590
imagine performing any other sort of operation the example below shows that they can use the checkbox
70
00:07:27,770 --> 00:07:29,120
on either side.
71
00:07:29,120 --> 00:07:37,990
See as the secondary action or as the primary action using the list item icon and passing in the checkbox
72
00:07:38,000 --> 00:07:42,070
component instead of an actual icon below.
73
00:07:42,080 --> 00:07:48,590
They show us an example of how you could create a really familiar settings screen allowing the user
74
00:07:48,590 --> 00:07:55,990
to toggle common options and pair the descriptions with icons that look appropriate as well.
75
00:07:56,990 --> 00:08:03,050
This helps create a very clear and convenient indication to the users of the current state of their
76
00:08:03,050 --> 00:08:03,940
application.
77
00:08:05,020 --> 00:08:11,230
You can really see just how flexible the basic list component is when you then compose it with all these
78
00:08:11,230 --> 00:08:19,200
different icons and actions using the built in the material UI components nearing the end here.
79
00:08:19,210 --> 00:08:23,140
The pinned sub header list shows an example of.
80
00:08:23,140 --> 00:08:30,070
I'm sure you've seen this before where the top a header stays where it's at until another header pushes
81
00:08:30,070 --> 00:08:34,300
it out of the way where it continues to do the same thing.
82
00:08:35,140 --> 00:08:42,310
They say here that this actually is not implemented by all browsers and it will default to disabling
83
00:08:42,310 --> 00:08:43,110
the effect.
84
00:08:43,150 --> 00:08:48,200
We're not supported but is still a nice cool little trick that they've added.
85
00:08:48,250 --> 00:08:54,910
We also have inset lists so you can see here instead of as the top example being all the way against
86
00:08:54,910 --> 00:09:03,060
the edge here they have this gap which you could use to indicate nesting or other types of association.
87
00:09:03,080 --> 00:09:11,360
And lastly we get to the virtual list and this is an example using another library actually called react
88
00:09:11,420 --> 00:09:20,120
window which allows a very large number of items to be rendered without severely affecting performance.
89
00:09:20,120 --> 00:09:26,210
And so this is extremely useful if you ever find yourself in an example where you do have to render
90
00:09:26,450 --> 00:09:33,830
a very large number of items but thankfully in our application we only have 6 tabs and so virtualizing
91
00:09:33,830 --> 00:09:36,380
the list definitely is not necessary.
92
00:09:37,320 --> 00:09:43,290
These are all great options to be aware of though and you can see that just like every other component
93
00:09:43,320 --> 00:09:50,940
we've looked at so far the material UI list component is equally as powerful if not even more so than
94
00:09:50,940 --> 00:09:58,590
some of its counterparts we've seen with its ability to add extra actions and icons all very easily
95
00:09:58,650 --> 00:10:05,080
using nested components that manage all of these styling and alignments for you.
96
00:10:05,090 --> 00:10:10,790
I think this makes it extremely easy to get up and going and get to a great starting point where you
97
00:10:10,790 --> 00:10:14,720
can then launch off and customize it fully to your needs.
98
00:10:15,340 --> 00:10:21,880
This has been our pattern so far and so let's continue by now integrating the list within our draw and
99
00:10:21,880 --> 00:10:24,580
customizing it for our own application.
12069
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.