Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:01,160 --> 00:00:10,670
Under the menu list composition it exposes a little bit more of a advanced technique to use the underlying
2
00:00:10,730 --> 00:00:19,850
menu list and Popper components which the menu component is built on top of two more customize the look
3
00:00:19,880 --> 00:00:21,590
and feel of your menus.
4
00:00:21,620 --> 00:00:28,610
So here you can see the menu is coming straight out of the bottom here and leaving the underlying button
5
00:00:28,640 --> 00:00:30,020
exposed.
6
00:00:30,020 --> 00:00:39,080
So this example is a lot more technically advanced but I do really like the end look of this feature
7
00:00:39,500 --> 00:00:45,440
and so I don't want to jump into it right now but I think that we might come back to this maybe as a
8
00:00:45,440 --> 00:00:51,020
bonus video in the end of the course and to see if we can't improve our menu even further using the
9
00:00:51,020 --> 00:00:58,710
menu list composition they show you examples of how to customize your menus as you can see here with
10
00:00:58,740 --> 00:01:06,420
icons and you can see different selection background color and we're going to be going into customizing
11
00:01:06,420 --> 00:01:13,050
our menu pretty extensively but you can see here just to take a look at the way that they're able to
12
00:01:13,080 --> 00:01:19,380
do this is by when they set up the menu up here.
13
00:01:19,380 --> 00:01:27,840
Actually they use a styled component syntax here to create a specifically styled version of the menu
14
00:01:27,840 --> 00:01:29,070
item component.
15
00:01:29,280 --> 00:01:37,110
But essentially they are setting the background color here whenever the menu icon receives focus.
16
00:01:37,110 --> 00:01:45,630
So whenever it is selected or clicked on they also change the text color inside of this.
17
00:01:45,630 --> 00:01:54,330
And here you can see an example of the JSF s cascading selectors where they are nesting and this call
18
00:01:54,330 --> 00:02:01,650
to any list item icon underneath a focused menu item.
19
00:02:01,650 --> 00:02:11,950
So any list item icon inside of a selected menu icon will then have the text color set to white.
20
00:02:11,960 --> 00:02:20,120
This is a pretty powerful example of what J SS is capable of and another way of how it makes styling
21
00:02:20,150 --> 00:02:23,600
more convenient in our applications.
22
00:02:23,600 --> 00:02:31,340
Now if you want to know where these classes are coming from so how do they know to specify the M UI
23
00:02:31,380 --> 00:02:33,650
list item icon route.
24
00:02:33,710 --> 00:02:42,860
That is a specific class provided by a material UI for us to override or customize any of the default
25
00:02:42,890 --> 00:02:45,550
material UI component styles.
26
00:02:46,810 --> 00:02:54,010
If you scroll to the bottom of the page here you can see this API section and this shows you all of
27
00:02:54,010 --> 00:03:02,130
the components they are used to build the menu component and all of the specific details of each one
28
00:03:03,190 --> 00:03:12,130
so if we come to the menu API you can scroll down and it shows you an example of all of the props that
29
00:03:12,130 --> 00:03:20,650
can be provided to the menu component as well as all their defaults and what all of the props do below
30
00:03:20,650 --> 00:03:23,110
that they have down here.
31
00:03:23,110 --> 00:03:29,470
These are the classes that you can use to override any of their default styles.
32
00:03:29,530 --> 00:03:38,350
So here you see the UI menu list and you could use that to overwrite these styles for the list component
33
00:03:38,590 --> 00:03:46,450
within any menu component and you can see here that the material UI components are sometimes composed
34
00:03:46,750 --> 00:03:48,390
of other components.
35
00:03:48,550 --> 00:03:52,640
And so you use this styling system here.
36
00:03:52,750 --> 00:03:55,950
The list rule name in the paper rule name.
37
00:03:56,140 --> 00:04:05,260
You can use those specifically to apply styles to any of these specific underlying material UI components.
38
00:04:05,280 --> 00:04:12,030
This allows you another layer of control over these styling and behavior of your application as well
39
00:04:12,030 --> 00:04:20,370
as providing a system for centralizing this using the overrides property in the default theme.
40
00:04:20,880 --> 00:04:27,990
So here you can see an example of on our theme object if we were to provide outside of the palette and
41
00:04:27,990 --> 00:04:37,170
outside of the typography options and override options you can then select the material or UI class
42
00:04:37,230 --> 00:04:46,550
that you want to style for a specific component and specify the overriding styles underneath then anytime
43
00:04:46,710 --> 00:04:55,240
you use one of those specific components they will already have the overridden styles so let me just
44
00:04:55,240 --> 00:05:03,340
go back over to the menu API screen and let's go back again to the actual menu components and there
45
00:05:03,340 --> 00:05:10,030
was one last thing I wanted to take a look at here and that is the change transition.
46
00:05:10,090 --> 00:05:17,980
And so here they provide a way for you to change how your menu is displayed.
47
00:05:17,980 --> 00:05:26,110
And so here you can see a fade transition as opposed to the grow transition.
48
00:05:26,110 --> 00:05:32,290
I believe these are using this right here also is showing that your menus can be scrolled of course
49
00:05:32,320 --> 00:05:35,760
which is a nice extra little functionality that you can add.
50
00:05:35,770 --> 00:05:43,270
And again you can just see this is a very verbose component designed to provide the base functionality
51
00:05:43,270 --> 00:05:50,610
necessary while providing these systems to be customized as extensively as necessary.
52
00:05:50,610 --> 00:05:56,070
I know that may have seemed like there was kind of a lot of code going on there but it really isn't
53
00:05:56,070 --> 00:06:01,330
too bad and I think that once we set up our own example it really make sense to you guys.
54
00:06:01,350 --> 00:06:05,460
So let's go ahead and get started doing that in the next video.
6478
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.