⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:
https://netninja.dev/p/chakra-ui-crash-course
?? Access the course files on GitHub:
Course files –
?? React Tutorial:
On Net Ninja Pro –
On YouTube –
?? React Router in Depth Tutorial:
On Net Ninja Pro –
On YouTube –
?? CSS Flexbox Tutorial:
On YouTube –
?? CSS Grid Tutorial:
On Net Ninja Pro –
On YouTube –
?? Chakra docs –
?? VS Code –
All right there my friends so in this Lesson we're going to take a look at the Tabs components and they look something Like this so we have different tabs at The top and when you click on those it Shows different content down here at the Bottom and there's different variations Of the tabs as well you can see we've Got these pill variations you've got These with little borders around them so There's a lot we can do with tabs and We're going to place our tabs component On this profile page right here So let's start by closing this junk down We don't need this anymore and then Opening up The profile page right here all right so Now we're going to start playing around With the tabs in this component so the Way this works is that we have first of All a tabs component And click on that to import it and then Inside here we have the tab list which Is all of the tabs at the top that we Click and then we also have the tab Panels which is where we show the Content for the different tabs so let's Do a tab list component first of all and Then below that we're also going to do We just get this right we need the tab Panels So click on that to import it all right Then so before we do anything I'd like To apply a few styles to the tabs so I'm
Going to say margin top is equal to 40 Pixels and then also we'll apply some Padding to this which is going to be 20 Pixels all right So now let's do the tab list so inside Here we have tabs so singular tab Component and we'll give a title of Account info for this tab and then I'm Going to duplicate this and change Account info to task history doesn't Really matter this is just filler Content I want to show you how the tabs Work All right So now if we save this and come over Here we can see those two tabs right Here and that default styling now I Don't really want to use this blue color Scheme so this is another component that We can pass in the color scheme prop 2. So I can say color And then scheme And set that equal to something and it's Going to be the purple scheme I want to use so if I save that now look At this that looks a little bit better Now we can also Target the tabs which Are selected if you like and we can Style those differently so I could come Here and say underscore selected and set That equal to an object and in here we Can specify styles to apply to this tab When it's selected so I could say the Color of the text is going to be white
For example and also the BG is going to Be purple So now when this is selected it's going To get these Styles if I save it and Preview we can see that's a purple Background This one's still on the default Styles But we get the purple background and the White text now I want to make that Purple a little nicer so we'll use Purple 400 Save that in preview and that looks nice And awesome So what I'm going to do is grab This thing right here in fact I'll grab All of these And I'm going to paste it right here Like so So we can see those all right looking Pretty good So I'd also like to apply a variant prop to This and that variant is going to be Enclosed That's just going to make it look a Little different because we have Different variants for these tabs much Like we have variants for buttons so you Can see it's soften the corners now all Right Okay so now we need to work on the tab Panels themselves so we have all of the Top panels in here and each panel of Content
Sub panel has a tab panel component we Need to import that up here tab panel And then inside these we can output the Content now the first tab panel is going To be linked with the first tab up here And the second to the second and so Forth so the order does matter So what I'd like to do in here is just Output a list of items now I'm not just Gonna Write this out from scratch because We've already seen how to use lists I'm Going to paste it in instead Scoot this in but I will go through it So we have a list component with a bit Of spacing a list item and a list icon We've seen this before and then the Email another list item with an icon Chat this time and then a final one with An icon which is a star now we need to Import those different things so let's Go up here and let's get that right for A start panel We need the list component we need the List item component we also need the List icon component as well now we also Need to import some icons and I'm going To paste that in Just so you don't have to watch me type This out so we have the chat one the Email one and the star one that we're Using at the minute we've got these Other two as well check Circle icon and Warning icon we're going to use those
For the second panel but anyway now we Have this list inside this tab panel so When we click on this it should show This content right here in this tab Panel I'm going to save it and you can See we can see this content if we click Away we don't see any content because we Only have a panel associated with this Tab at the minute but we can make Another one so let's come down here and Do our second tab Panel like so And inside this one again I'm just going To copy and paste this from the course File so you don't have to watch me type It all out from scratch it's just Another list so we have a list item Right here with an icon which is check Circle icon and the color is kind of Like a greeny teal so this is a tick Icon right here This one is a tick icon and then down Here we have a warning icon which is red Instead so we're just using different Variations of the tick icon and the Warning icon in this history of tasks That the user has apparently done okay So let's save that and preview and if we Go to task history now we can see that Content right here awesome and that's Pretty much it my friends that's how we Create tabs so we have this tabs Component right here we have a tab list For the list of tabs at the top and we
Can use this selected prop to style the Selected tabs and then down here we have The tap panels where each tab panel Corresponds to a tab in the tab list Easy
