Hello, in this ionic video, we're going to cover the built in header and sub header classes for the CSS components. So you got a header and a sub header. And you got some basic styling that bionic provides really simple stuff. So I'm going to switch over to my text data. And in the index dot HTML file, this is where I'm going to put it, it's going to get rid of all the default code. And to add a header, it is really simple.
You do a div. And then inside of here, you can before you even do that, go do the classes. So class equals bar, bar dash header. Then bar dash loi. This is the first one we're going to look at, but we'll cover all the different headers and sub headers in here. And then here just for h1 for this just for the class.
Title and inside here is put. Save that, come compile our project. And then that is done, we can run the code in our simulator run the project I should say. As you can see, this is what eight, a night header looks like. So now let's cover the various other header styling within ionic. So first of all, what I'm actually going to do is put a comment here.
And this comment is simply going to provide you with all the different styling methods or styling classes that you can use for header. So this way, I don't need to just copy and paste this and just commented out so you can see what you need to update on your end. So, the next one we're going to collect is bar Gosh, stable. You know what, what I'm going to do is just add them all here on the bar dash positive bar does calm ball dash balance as the next one which is basically green one ball, dash and a joist, bar dash, two, only from guess what color the badass facility will be without obviously using it, badass royal and dark. So these are all the different classes that you can use for styling, a header and a sub header for that matter. So if for example, we wanted to do and enjoy Joy's saved up though our project switch over to Xcode or however you are running it on our project and we know we should have a header.
Here we go. And as you can see, not only are these styled it is actually changed the status bar color. Those are fantastic. It's a great way of making it look really, really slick. Am I thinking okay, the black and white look as good as the white? How do you change that?
Check out our YouTube channel, we've got a tutorial on how to change the status bar color on an iOS device. So yeah, now what I'm going to do is show you how to do a sub header for the rest of these classes because I've listed the mighty and all you do is just change this class. We want you to Cody yourself and just mess around with you just to see the different classes So to do a survey, you do another div. Inside here you have a class bar, bar dash, sub header, sub header, and then you have your styling class or bar dash. I'm gonna Port Royal and inside here, just for h1, pretty class of title. And in here I'm gonna put a header, say this build our project.
Now refresh our project mean rerun our project. And here we go. We have a header and a sub header. That's important use headers and sub headers within ionic. If you have any questions, feel free to post them on Our education platform. So now learning Dakota UK does this video, please give it a thumbs up, hit that subscribe button and leave a comment.
There will be a link in the description to our GitHub page which has the source code from all the videos in this series. So check that out. As usual. Thank you for watching and I hope you have a great day.