All language subtitles for 15. Tabs Overview

With our header really starting to take shape it's time to start getting into the main functionality

of what the header is actually for and that is to provide a place for users to navigate between the

different pages of our application.

This is primarily done using tabs which are the little links at the top of the page in your header and

material UI provides a tabs component that makes setting this up as well as managing some of the functionality

required very easy just like it does everything else so let's just start by going through the material

UI documentation for tabs and see what they kind of provide for us to begin with and then how we're

going to then go and customize those ourselves.

Here we are at the documentation page under components and then navigation and at the bottom tabs.

Like I said tabs make it easy to explore and switch between different views or in other words the different

pages within your application.

So this is obviously exactly what we want and if you come down and look at the simple tabs example you'll

see something very familiar to the header design that we are trying to build.

You see the links each with their name and you can also see here that the active tab is not only highlighted

on the label but it also has a little extra strip of color signifying that that is the active tab when

you click on to a another tab you'll see the little animation as the inline moves over and the highlight

changes to indicate the newly updated tab.

If we want to go and take a look at how this is actually working we can open up the source and the main

imports up here to be aware of are the tabs component and the TAB component so you can see one is plural

and one is not.

And we use both of these to set this up.

Down below you'll find where they have implemented the tabs right here setting the tabs component first

and then putting each tab within that each tab then has a label.

And if that is what changes the text that is displayed here on the tab itself.

So that text right there is coming from our own label prop.

And then on our tabs component we have the value and on change props.

These are what keep track of and manage which tab is selected giving us the highlight and the little

indicator down here the way that this is actually managed is by using this value and set value hook

with the use state function.

This creates a state value of value and it sets value equal to a default of 0 and then gives us the

function set value to change this state.

This is essentially a shorthand for this dos set state using the new react hook API.

We then pass that value to our tabs component as the value prop.

And this is a number specifying the index of the currently selected tab.

So you can see when we set a default of 0.

That means that the tab in the 0 with position will be passed to our tabs value prop as the active tab.

Then we have our on change which is past the handle change function that is defined here which then

takes our event and the new value which is the index of the new we selected tab and uses the set value

hook to set that new state value when the newly selected tab value is passed to the state.

It then causes a re render which then displays the content from the new tab.

So here you can see that every time we click the other tabs.

So if we flick back and forth every time that we click on one of these tabs the on change handler is

being called and is passing the index of whichever tab we have clicked on to the set value function

which then the sets are state to that selected tab which then renders the content down below now and

here they actually use the tab panel to display the content below which is connected to the values.

And here you can see the specified indices but we are actually going to integrate this with react router

and that is going to manage changing the content on the screen for us.

Managing the active tab however will still be the same.

And so we'll be using this value and set value hook to give us that functionality if we move on past

the simple tabs example and we scroll down.

We can take a look at some of the other options for tabs that material UI provides to us which there

are plenty of we'll just kind of go through some of these.

But if you are interested remember to just come and check out the source code and you can see which

props and what other components they may be using to get some of the functionality that you see here.

For example for the wrapped text or wrapped labels example here you'll find they use the wrapped prop

on the tab component which makes it wrap this text instead of cutting it off.

You can also see that you can set some tabs to disabled so I can select the active tab active tab but

I can not select this tab in the middle that is disabled.

So you could imagine programmatically checking whether or not a user has access to a certain tab or

setting and then disabling or enabling that based on those permissions.

There's also the full width variant which will make your tabs take up the entire length of the bar and

then below we have the centered prop which squeezes all of your tabs into the center of your toolbar

or app bar if you have lots of tabs.

Then you might need to be able to scroll them so you see here if I actually go and shrink down the window

size you can see the scroll arrow appear and now I can click that to scroll the items back and forth.

If you want to always be able to scroll you can set a forced scroll option.

And now that is always available regardless of how big the viewport size is.

So you can see I can expand back up and it's still there.

If you want to be able to scroll but you don't want those little arrows there you can turn them off

and now the user will just have to know to scroll or swipe on their own.

And if I go ahead and shrink this down again and then head back down you can see that now I have the

ability to scroll even though the little scroll bars are not there.

Further down you can see that they give examples on how to customize the tabs but we are actually going

to be doing that as well in the next video but they also have the ability to have vertical tabs.

If you need and so you could see that this allows you to do a multitude of different navigation options

depending on whichever is most appropriate for your application.

Here's a another example of how you can actually do navigation by changing these tabs into links but

again we're going to be using react router for that.

And so I'm going to walk you through that process as well.

Lastly they just want to show you that you can actually use icons so just icons or you can add tabs

with text and icons as well.

So whichever style or feel for your application that you want or that you feel would be best for your

users you can see material UI provides a ton of different scaffolding for you then to build on and customize

for whatever specific situation your project might call for.

So the things to really remember and take away is just remember we have our tabs components which then

wraps each individual tab which we then set the label to give.

R text that we want to be displayed and then the tabs component has a value and then on change handler

which manages the index of which tab is selected so you know all the different options that there are

four tabs now and I think that the structure is pretty simple for getting this setup.

So let's go ahead and in the next video we're going to start implementing this in our own application.