Would you like to inspect the original subtitles? These are the user uploaded subtitles that are being translated:
1
00:00:00,870 --> 00:00:07,840
Now that we're completely familiar with how the tabs work in material UI let's start getting it set
2
00:00:07,840 --> 00:00:08,130
up.
3
00:00:09,220 --> 00:00:19,690
First we're going to come up to the top and we're going to import ar tabs from material dash UI slash
4
00:00:19,690 --> 00:00:31,490
core slash tabs and then also import the tab from the same place except with tab at the end not tabs
5
00:00:32,590 --> 00:00:35,590
and then we're going to come down here below our image.
6
00:00:35,650 --> 00:00:42,780
So underneath the logo and we're going to open up our tabs component inside.
7
00:00:43,030 --> 00:00:52,820
Let's go ahead and set up a tab with a label of Home Capital H and it's a self closing tag.
8
00:00:53,080 --> 00:00:59,830
And then we're going to go ahead and copy this and paste this for each of our pages that we want to
9
00:00:59,830 --> 00:01:01,050
have.
10
00:01:01,060 --> 00:01:03,400
So I believe there are five in total.
11
00:01:03,400 --> 00:01:17,600
So I need to add one two three four more and then we'll change these labels to services the Rev Mu Shun
12
00:01:19,700 --> 00:01:24,830
about us and contact us.
13
00:01:24,830 --> 00:01:26,480
Easy enough.
14
00:01:26,590 --> 00:01:31,450
Let's go ahead and save this and see how far that gets us.
15
00:01:31,450 --> 00:01:35,830
So go ahead and save and we'll see the app refresh.
16
00:01:36,040 --> 00:01:40,970
And now you can see that we've got these tabs up in our toolbar.
17
00:01:41,190 --> 00:01:42,540
They don't do anything yet.
18
00:01:42,630 --> 00:01:48,450
If you click on them except give a little ripple up there so you can tell that they are buttons and
19
00:01:48,450 --> 00:01:55,950
you get the little hover the click cursor showing up but you see we don't have the active tab there's
20
00:01:55,950 --> 00:01:57,500
no managing of that.
21
00:01:57,570 --> 00:01:59,790
They're all on the highlighted right now.
22
00:01:59,790 --> 00:02:06,300
So none of them are highlighted and it doesn't change any of the content that we are seeing on the screen
23
00:02:06,630 --> 00:02:10,560
nor does it change the path in the U.R.L..
24
00:02:10,590 --> 00:02:16,710
So obviously we haven't set up any routing and so they are not actually changing the page that we're
25
00:02:16,710 --> 00:02:21,680
on yet before we start getting into all of that though.
26
00:02:21,850 --> 00:02:28,250
I want to actually set up the styling for our tabs so that we can make sure it looks how we want it.
27
00:02:28,300 --> 00:02:34,790
And then we'll go in and start adding the functionality to start getting this to look how I want.
28
00:02:34,790 --> 00:02:41,900
In the design the first step is to make all of these tabs actually aligned over to the right.
29
00:02:41,900 --> 00:02:45,260
So we want them to be more pushed over to the side there.
30
00:02:45,920 --> 00:02:56,580
So we'll do that by go ahead and adding a class name to our tabs and we'll set that to classes dot tab.
31
00:02:56,600 --> 00:03:05,880
Container then we'll go up and we'll create that styles in our styles object of TAB container open that.
32
00:03:06,240 --> 00:03:17,830
And now we want to set our margin left to order auto what this does is it sets the left margin so here
33
00:03:17,830 --> 00:03:20,870
between the tabs and the image.
34
00:03:20,890 --> 00:03:25,100
This left most margin here by sending it to auto.
35
00:03:25,150 --> 00:03:33,640
It's going to extend as much as it can and push all of these tabs down over to the right side.
36
00:03:33,640 --> 00:03:40,630
If we go ahead and save our file we can see the app refresh and you can now see the tabs have done exactly
37
00:03:40,660 --> 00:03:41,050
that.
38
00:03:42,150 --> 00:03:50,600
The next style that I want to do is to actually change the font used in the header tabs and to do that.
39
00:03:50,610 --> 00:03:54,410
I've actually attached a link to this video.
40
00:03:54,720 --> 00:03:59,970
And if you go ahead and copy that link we're then going to head into our index.
41
00:03:59,970 --> 00:04:01,860
Dot h t email file.
42
00:04:02,010 --> 00:04:09,150
And here where we are linking to the Google fonts for Roberto right in front of Roberto.
43
00:04:09,180 --> 00:04:10,970
So where it says CSX.
44
00:04:10,980 --> 00:04:16,020
Question mark family and then an equal sign after the equal sign.
45
00:04:16,050 --> 00:04:24,260
But before Roberto we're gonna go ahead and paste in that link and so you can see that that's Pacifica.
46
00:04:24,450 --> 00:04:32,160
And then a bar or a pipe depending on what you call that and then the railway font with the 100 400
47
00:04:32,710 --> 00:04:36,560
400 italics and 700 variants.
48
00:04:36,690 --> 00:04:43,830
So make sure you have all of those correct as well as the bar or pipe before rubato and then go ahead
49
00:04:43,860 --> 00:04:52,050
and save that file with our Google fonts hooked up we can exit out of the index Deitch html file and
50
00:04:52,050 --> 00:05:01,020
head back to our header dot J.S. s and here we're gonna go down and set a class name on our individual
51
00:05:01,050 --> 00:05:09,770
tab and so we're going to call this class's dot tab then we're gonna go ahead and actually copy that
52
00:05:10,250 --> 00:05:17,420
and we're going to paste that class onto all of our tabs down here.
53
00:05:17,420 --> 00:05:25,250
Now we can go ahead and style our tabs by adding the tab style to our styles object and we'll start
54
00:05:25,250 --> 00:05:33,000
by setting the font family to railway which is one of the fonts that we just installed.
55
00:05:33,130 --> 00:05:34,990
You can go ahead and save that.
56
00:05:35,000 --> 00:05:40,210
See our application refresh and the new font is now in use.
57
00:05:40,290 --> 00:05:48,870
You can see that the tabs are actually in all uppercase and that is due to a styling from the button
58
00:05:48,960 --> 00:05:54,810
component which is actually being used underneath the tab component here in material UI.
59
00:05:54,930 --> 00:06:02,760
And so to disable that we're going to go ahead and give it a text transform of none.
60
00:06:02,800 --> 00:06:04,890
And that will disable the upper casing.
61
00:06:04,900 --> 00:06:12,290
And so if you go ahead and save that you now see that we have our default text styling.
62
00:06:12,370 --> 00:06:22,090
Now I actually want our font to be bold so let's go ahead and add a font weight font weight of seven
63
00:06:22,150 --> 00:06:29,170
hundred to this and a 700 because that is one of the font weights that we specified when we just imported
64
00:06:29,190 --> 00:06:31,900
railway from Google fonts.
65
00:06:31,930 --> 00:06:39,970
So if we go ahead and save this we can now see a much more bolder font choice the font weight looks
66
00:06:39,970 --> 00:06:43,600
really good now but it's definitely still too small.
67
00:06:43,630 --> 00:06:48,980
So let's go ahead and add a font size of one rim.
68
00:06:49,270 --> 00:06:55,780
And that's the responsive unit the material UI uses throughout their theme and is connected to the base
69
00:06:55,780 --> 00:06:56,580
font size.
70
00:06:56,590 --> 00:07:05,390
The material UI provides to us of 14 points if we go ahead and save that you'll see the font size increase
71
00:07:05,450 --> 00:07:13,140
and that looks about where I want to be by using rim instead of pixels we make sure that that font is
72
00:07:13,140 --> 00:07:15,490
going to be relatively the same.
73
00:07:15,510 --> 00:07:19,020
Looking size across all different screen sizes.
74
00:07:19,140 --> 00:07:26,310
Whereas using the pixel unit could cause screens of differing screen resolutions to display the text
75
00:07:26,310 --> 00:07:27,920
a differently.
76
00:07:28,080 --> 00:07:33,420
We definitely want to make our design as consistent as we can across all devices.
77
00:07:33,420 --> 00:07:37,600
And so that's why we're going to be using the rim unit.
78
00:07:37,650 --> 00:07:43,950
This is getting really close to the look that I have in the design but I still want to go ahead and
79
00:07:43,950 --> 00:07:50,320
change the spacing between the tabs because I think that that's still a little bit too large.
80
00:07:50,340 --> 00:07:55,670
Let's go ahead and add a mean width then of just 10.
81
00:07:55,740 --> 00:08:03,540
If we save that we can see the that then squeezes all of our tabs together and makes their width equal
82
00:08:03,600 --> 00:08:08,850
more equal to just the width of the text within it.
83
00:08:08,900 --> 00:08:12,550
We don't want each tab to have a ton of extra spacing in it.
84
00:08:12,590 --> 00:08:15,850
So we just want it to really be around that text.
85
00:08:15,920 --> 00:08:21,500
So that's why we have these small men width but they are a little bit too close together then.
86
00:08:21,560 --> 00:08:28,290
So what's at a margin left to each one of 25 pixels.
87
00:08:28,340 --> 00:08:35,060
Now the reason that we would use pixels here is because we want to maintain a constant spacing between
88
00:08:35,090 --> 00:08:45,990
those tabs regardless of if the browser is on a 27 inch iMac or a 13 inch MacBook if we used a responsive
89
00:08:45,990 --> 00:08:53,430
unit here then that spacing would be relative and different for each screen size which isn't exactly
90
00:08:53,430 --> 00:08:55,970
the look that I want for the tabs.
91
00:08:56,010 --> 00:09:01,810
And so we're going to create a little more consistency using the pixels unit here.
92
00:09:02,040 --> 00:09:10,170
Generally we'll be using the pixels unit for certain specific spacing sizes whereas four sizes of elements
93
00:09:10,170 --> 00:09:12,110
themselves or the text.
94
00:09:12,150 --> 00:09:19,810
That is when we'll be using responsive units so let's go ahead and save this with our margin left and
95
00:09:19,810 --> 00:09:23,730
you can now see that those tabs are just a little bit more spaced out.
96
00:09:23,760 --> 00:09:27,770
And I think that that is exactly where I wanted them.
97
00:09:27,810 --> 00:09:34,680
Now if you want to flip back to the design file and see what the header looks like in there I'm pretty
98
00:09:34,680 --> 00:09:41,670
sure you'll find that we have almost exactly nailed it down the look that I was going for although we
99
00:09:41,670 --> 00:09:49,210
obviously still need the estimate button and then the way to keep track of which tab is active we'll
100
00:09:49,210 --> 00:09:52,320
keep moving forward with that in the next few videos.
101
00:09:52,420 --> 00:09:58,120
But for the very last part of this one I just want to do a little bit of cleanup that will help make
102
00:09:58,120 --> 00:10:01,620
our project a little more efficient in the future.
103
00:10:01,720 --> 00:10:09,130
So what we're going to do is we're actually going to take this font size font weight text transform
104
00:10:09,250 --> 00:10:14,740
and font family properties and we're going to cut those away.
105
00:10:14,740 --> 00:10:19,920
So leave the men width and the margin left on the tab.
106
00:10:19,990 --> 00:10:28,150
And now let's go over to our theme dot J.S. file and where we had our H 3 typography variant just so
107
00:10:28,150 --> 00:10:35,500
that I could show you how the typography system works let's get rid of that and replace it with a tab
108
00:10:35,560 --> 00:10:43,420
option and open that up here you're seeing the first example of how we can set our own custom variants
109
00:10:43,480 --> 00:10:50,050
for the theme object which allows us to really centralize styles that we know we're going to be using
110
00:10:50,050 --> 00:10:58,110
elsewhere in the application so here we're going to paste those styles that we had just come over from
111
00:10:58,110 --> 00:10:59,220
our tabs.
112
00:10:59,220 --> 00:11:06,720
And so if we save that and then flip it back over to our header file now in our tab since we have access
113
00:11:06,720 --> 00:11:15,750
to the theme right there we can simply extend the tab typography theme using the spread operator.
114
00:11:15,750 --> 00:11:26,070
So just like we did for the theme dot mix ins dot toolbar right there we will extend theme dot typography
115
00:11:26,490 --> 00:11:30,600
dot tab and then make sure you get the comma there at the end.
116
00:11:30,600 --> 00:11:36,990
And if we go ahead and his save now you'll notice the page reloads and we still have all these styling
117
00:11:36,990 --> 00:11:43,410
for our tabs except now we've done a little bit better of a job by centralizing them in our theme in
118
00:11:43,410 --> 00:11:50,540
case we need to use them later on with this setup though our header is really looking good and now we've
119
00:11:50,540 --> 00:11:57,050
got some styled tabs looking exactly how we wanted it and so now the next step is putting in that estimate
120
00:11:57,050 --> 00:12:02,960
button and taking a look at the different options for buttons in material UI.
13593
Can't find what you're looking for?
Get subtitles in any language from opensubtitles.com, and translate them here.
Afrikaans
Akan
Albanian
Amharic
Arabic
Armenian
Azerbaijani
Basque
Belarusian
Bemba
Bengali
Bihari
Bosnian
Breton
Bulgarian
Cambodian
Catalan
Cebuano
Cherokee
Chichewa
Chinese (Simplified)
Chinese (Traditional)
Corsican
Croatian
Czech
Danish
Dutch
English
Esperanto
Estonian
Faroese
Finnish
Galician
Georgian
German
Greek
Guarani
Haitian Creole
Hausa
Hawaiian
Hebrew
Hmong
Hungarian
Icelandic
Indonesian
Irish
Italian
Japanese
Kazakh
Kinyarwanda
Kirundi
Kongo
Korean
Krio (Sierra Leone)
Kurdish
Kyrgyz
Laothian
Latin
Latvian
Lithuanian
Luganda
Luo
Luxembourgish
Macedonian
Malagasy
Malay
Maltese
Maori
Mauritian Creole
Moldavian
Mongolian
Myanmar (Burmese)
Montenegrin
Nepali
Norwegian
Pashto
Polish
Portuguese (Brazil)
Portuguese (Portugal)
Quechua
Romanian
Romansh
Russian
Samoan
Scots Gaelic
Serbian
Sesotho
Setswana
Seychellois Creole
Shona
Sindhi
Sinhalese
Slovak
Slovenian
Somali
Spanish
Swedish
Tajik
Thai
Tigrinya
Tonga
Turkish
Turkmen
Ukrainian
Uzbek
Vietnamese
Welsh
Wolof