Hello, in this ionic programming tutorial, we're going to look at the toggle CSS component. Toggle is basically a toggle button that you can click point one or zero on or off, chances are, you see any in applications on your phone where you're selecting maybe whether or not you want to know everything, what you could use. For the, there's a bunch of things, you could have it so it automatically signs you in or not. That could be a checkbox that could be a toggle, you could maybe toggle features in the application, he'll become a lot more apparent when we actually start coding. It's very simple. And you can have different colors, which I'll put right here.

All the source code will be provided. So feel free to check that out as well. It's quite simple toggle. You just do label and then label as a class of toggle. Inside here you have an input. And the input has a type of checkbox.

Remember I mentioned that 30 seconds ago that when you have some sort of toggle, to say whether you're automatically going to sign in on it could be a checkbox, it could be a toggle. At the end of the day, a toggle is just another form of checkboxes. Just say just looks nicer. That's the main difference, because then it's still one zero on or off. So next, you want to add a div, div, class truck. And inside here, you need a number div, which has a class of handle.

And that's it. It is literally that simple. So now let's save it. So Where is my terminal? build the project. Let's run it in the simulator.

At the moment, I haven't applied any of the color styling or to that in a moment. As you can see, we are toboe exactly at the top. So let me just know what instead of a brake line, what I'm going to do is I'm going to add a custom class. And I'm literally going to call this custom class. class. And in here, I'm just gonna call margin right 100 pixels, save that rebuild our project.

Run it. And there we go. We've got our toggle, which is another form of a checkbox. You click it now on, it's now off. So pretty simple stuff. It's very, very easy to actually add styling to it.

What you do is where we've got the total class, we just add a number class. We call this toggle, dash, one of these colors so positive balance and enjoys Whatever. I'm what I'm going to show you now is how to create a list with a bunch of toggle in there and a label just to dictate or just to illustrate to the youth that what they are totally because if they don't know they don't want to be randomly turning things on or off. So I'm gonna leave that. Below down the parent phone ordered list. Gonna have a class of list, there is a separate tutorial covering lists of check directs, I'm sure that will help when you're looking at all the components that are using lists as well like this one.

Inside here is a list item. Class, I'm going to create class item total. And now inside of here, simply put what you're toggling so just some text to show to the user that was something they can read so they know what it is. So for this, I'm just gonna put I'm going to, I'm just gonna put the number one. I don't really think of anything more creative than that. So label last quarter, toggle.

You know, I'm gonna leave that like so because I'll show you. Yeah, that's one only. I'll leave this one as it is. And then I'll change number one that I add which will actually have the different CSS styling in here, seven input, and you guessed it, the type is shift box. And now finding inside here nobody has a class of handle. And now to add more toggles just copy and paste this list, I turn to And we're going to show you how to add the different color classes.

So all you do is do toggle, dash, one of the color named royal. I'm going to copy and paste this again, I'll add five different ones, or four, five. So now let's just increment the number free. four, and five. So, for number free, totally free, more colors, money, stable, calm and the joy is so stable. Calm and enter.

Save that rebuild our project. Now we're ready to run it in our simulator. So here we go. So this was the toggle thousand exam, obviously still works. But with a toggle in a list format, we, we can just add a quick little label, which actually just helps the user know what the topics are. If I press this one, this one, this is this.

This Oh, here we go. We've got the different topic colors actually looks pretty cool. Chances are you probably wouldn't be using loads the different color classes because it doesn't look or else it doesn't look really nice because at the end of the day, you want it to look uniform. You don't want it to look like a rainbow or anything. Well, that's it for toggles. We're going to have a separate video on checkboxes, but essentially a very, very similar concept.

If you have any questions, feel free to post them on our education platform. So not learning Dakota, UK there'll be a link in the description to that Have a link in the description to source code from this video. If you liked the video, please give it a thumbs up, hit that subscribe button and leave us a comment. And as usual, thanks for watching and have a great day.