Hello, in this ionic programming video, we're going to show you the CSS component tabs, tabs. Chances are if you've used an application, or if you've created an application or if you're here watching this video, you know where a tablet system is, for you, Facebook, Twitter, something along those lines, it's a great way of displaying information that usually will be on a separate page. Technically, it is. But the actual way to access those different pages are always on the screen, you can make that disappear. But I think the whole point, the actual benefits of it, of a tablet system, that the buttons are always there, most of the time they're at the bottom, but they can be on the top as well. There's no reason why they come.

Many applications do have them on the top. So let's get started. First of all to create a tab This is created. Really simple to do. Add a class of tubs In here, we need a tag, which is gonna have a class of tab dash item. And this is where the oil itself I think you guessed already, I'm going to call this home.

And to add more items, you simply just copy and paste this. This and now I'm just going to change this setting, change this to and save it. Obviously these don't do anything but this is the sort of deals or tabs you would have in an application. So now let's build our project. Taking a little longer than usual, a lot longer actually. Okay.

It's a bit laggy let's have a look at what Activity Monitor is saying. Activity Monitor is looking at. Okay, weird void. x code again, god damn x code. For some reason, I loaded up Xcode earlier on as well. And it was just using so many resources.

Sometimes you will get an application that just wants to do its own thing. tell you a little story while I miss loaded Xcode up again. I was using GitHub a few months ago, and I am not joking. GitHub tried to use over 30 gigs of ram it was actually going into reserved ram from from my hard disk. I was like, why would you want to use so much he wasn't even doing anything. Either way, he that was really annoying.

So let's just run this Seems a bit laggy the simple Activity Monitor is saying again, seems okay, fingers should be able to make do. The application is loading up. So here we go, here are the tab system for click on it, nothing happened apart from I can hover over it click but doesn't actually change anything because that's required JavaScript. And that's going to be in a separate video. This is just showing the CSS component. So that's text.

A lot of time you've seen tab. items that have icons in there to add an icon really simple. So let's just add an icon here. So what we're going to do is do it class. If you want more information about CSS component, I mean, ionic icons, feel free to just do a quick Google of ionic icon and you'll get a page showing you all the different classes they can use and what they look like. And what you want to do is you want to position the tabs so tabs, icon dash.

So let's just save this, I'm actually going to have like a hybrid system. So I'm going to have two that actually have an icon and the third one won't have an icon at all. So I'm going to put this as a good a save. build our project. To go there so now let's run this. Okay, so here we go.

We have an icon of Roy, Connie Molly thinking well, don't worry Got the text? Why is that at the top and the reason is because of this class right here, tabs dash or Yukon dash top. So we anchor everything to the top. If you don't want text in there, you, you simply remove the text. And one thing you need to do is change top or whatever position you got to own it. So that makes the positioning or good when you can also do is do dash left.

So what this does, actually, I won't even tell you our return. I'm just gonna build it and show you that's always the best way to learn visual learning how you can actually see the result of it Okay, so now that I have built let's run the application and simulator. After I've done this video, I'm definitely going to have to have a look a wide so slow. I'm hoping that a simple restart will quickly fixes most problems, but it's weird. I haven't been doing that much on it today computer haven't been on that long. But for me, it seems enough for this video, so that should be a Okay, so if you put, as you can see tab dash a icon dash left, it anchors the icon to the left and well because there's no icon here this is just well and good.

And that's it really what you can also do is change the color of well your tab because if you have a look at the tab at the moment, he's just got this gray Ready for color. So if you want to change the color, you simply use one of these colors that we've got right here. Basically the same color classes or color naming convention that we've had in all for the warrior, the CSS components, you just put cabs dash, let me put positive, save that rebuild the project. Okay, now let's just run it and you'll see our new or our tab are different From colon, so it's just a great way of changing the current system. Okay, here we go. Let's load up the simulator.

There we go, we have a different color now because we used positive, you might be thinking, Oh, how do I change the color of the actual items themselves, maybe you want to change them. I'm going to chain them to dock to do that you put tabs, dash color, so tab dash color changes the actual of the actual colors, the items inside. So I'm going to put dash dog which is this one right here. Obviously you probably won't want a dog color and another dog or like I don't know like call ugly mom. You have to see very well. Nothing I'm going to show you before.

I can pilotless technolo was compiled for I do tab dash drift. This looks quite cool as well. So let me show you what this is like and you need to set one of these to active. So let me set this one to active. And now let's build a project. So if you can hear my stomach's rumbling, just had some pizza, which still so like, he wants more food.

I think I might have to bury my stomach and after I've done this video, okay, so it's almost built our project. So now let's run it in the simulator. They've learned quite a lot in this video by Todd how to position them how to add color, how to have icons, how to not have icons and just text or does have icons and no text. Best way to learn is just to advance on what you don't buy. just combine the different elements that you've learned, actually see the results. Sometimes it won't look so good.

Sometimes you'll look fantastic under, let's say died. Definitely not what we want. So let's go back and see what about this. It didn't like so tab, dash stroyed. I'm going to get rid of this position. I shouldn't be an issue whatsoever.

Tab dash positive. I think this needs to be background, tabs dash background as positive tab dash color dash dog with inside of this we have tabs Just trying to ah, I think I know what I've done within. This actually needs to be its own container above what we already had. So, within this we actually need a div. Copy and paste the and in turn, three after here. Go back back to this bad boy out.

It's close enough in terms of indentation. So class, Disney stellar class of tabs, save that rebuild our project The first thing I'm going to do once I've done this video and actually once I've edited the and go ready to upload it restarted just try and do some test videos just to make sure it's it's all good now because this is really up, I'm hoping it will be okay cuz I'm gonna watch the video afterwards just to make sure it's okay because if it isn't, I will re record it but I think it's smooth enough for this video but I will rectify this problem if you're watching this video, very sorry, but I will I will, chances are I will have already rectified it by the time you watch this video. Though this is about a load, come on load in our amazing simulator. So there we go.

And as it's sort of hard to see I'm gonna zoom in a second. There is a line on the top and that's what the strict part if it is another way of indicating which one Active because the other two are gray, this is dark, and that that dark color. And that color that is dependent on the class that we use here, tab dash color dash dark. So if I were to lift a click on this one, as you can see, it's selecting it, but then deselect when I let go. And like I said, because we haven't added any JavaScript, and that's gonna be a separate video, because at the moment, we're just covering CSS components. You'll learn all about having individual pages, which have its own content for each individual tab.

So that's it. If you have any questions, feel free to post them on our education platform, sonar learning.co.uk. There'll be a link in the description. We'll have a link alongside that one to the source code of this video source code out every other video in this series, fill out the video, please do the forms up hit that subscribe button, leave us a comment. And as usual, thanks for watching and I hope you have a great day.