How to make a custom toggle/switch with tailwindcss and vue.js

hello everyone welcome to this tutorial and this is my very first youtube video i am vyasamoth i work as a front end engineer and today we'll be making this small little toggle button with ugs and talvin css i have also written an article on the same make sure you check it out if you want a more detailed version of how it works and how it was made i'll leave a link to it in the description so basically we will be making this small button where we have a thumb once our user clicks on it it goes to the right and when he clicks on it again it goes to the left and notice how the background changes to green when it is an active state and goes back to grave and it is not active okay so let's begin by creating a new next project so let's open up the terminal okay yeah let's go to a directory and let's create a new next project create next app let's name it toggle button so this will create a boilerplate nox js starter for us javascript yes i'll use yarn make sure you use tailwind css as well i don't need any of these i don't need lend i don't need testing i will just select this as a static app i will select this okay so let's give this a minute to finish i'll speed this up okay now that we have a project ready let's go into this directory and open it in vs code all right so nux js will basically give us an index page to begin with and an example component which i will get rid of i'll just delete these i'll delete this as well okay let's put this in the center using the table in css classes and now that we have a page ready let's create a component called toggle.view all right okay if you have vitr installed all you can do is just type view and it will and hit enter it will allow it just basically adds a little bit of boilerplate to your viewfinder template a script and a style i don't think we'll be needing this style part okay uh so let's see how it looks so basically what we need is an outer div and an inner small round rounded full button okay so let's do this with div let's take a parenthesis give it classes flex obviously and give it items center and let's give it a gray background color with bg gray 300 and do around it full let's give it a width of w 14 and height 8 and also give padding one so that we have this little bit of space okay let's see how this looks uh since we are using lux.js you don't have to import them explicitly if it's in the components folder you can just import it automatically by just giving the same name as the file okay let's just run try to run this project all right we have this running on this board just give it a minute it should start up all right okay so you can see we have this let's just center this by giving it a height okay now that we have this let's play this inner rounded child let's take that div we give it height six with six and around it full let's also give it a shadow md and see how it looks okay let's give it background light okay as you can see we have our parent and the child if ready now the next thing is actually pretty simple what we need to do in order to make it interactive is take a prop and give it name with the name value and it should be of type volume and default value can be false okay so what we need to do first is bind a class so what we basically so we need it to be green if it's an active state the active state is defined with this variable with the name value and we want it to be green if it's true so what we can do is bg green 500 if it's true all right let's see if it works and by adding a method uh click listener with the method toggle okay let's add a method with the name toggle what we can do is we can emit an event with the name input i'll tell you why exactly in a minute why we need to emit input this dot dollar emit input and we want to pass the negative of the variable right okay so so the way we you must have used v model so the way v model works is it's a combination of two directives at input and the prop value so basically what it does is input is what is emitted and the value is what we passed so let's do we module and let's assign it to a variable named value and let's set it to false okay now that we have a click method attached to this parent div let's see how it well it's actually turning the background to green and yes it is turning to green which you can see here okay now what we need to do is move this inner child rounded button to the right which is actually quite simple all we have to do is bind another class of translate on the x-axis with six units if the value is true let's see if this works okay it does not let's see what i'm doing okay i am i am missing uh an important class which i need to add if you are using the i mean the translate class dynamic you have to use transform okay yes you can see that it's moving now in order to animate this tailwind has built-in transition classes which i will put here transition since we are changing the color here we will use transition color and since we are using h animating the translate value what we can do is use transform sorry transition transform so this will make sure that it gets animated or transitioned to this green color and to this x axis now let's see if this works and yes indeed it does so basically we have made a small toggle button and i am using divs i am sure you can make it more accessible i guess by using buttons so that's it for today i hope you enjoyed the video and if you have any questions or if you think this tutorial could have been done in a better way or if you have a video request on front end tutorials vue.js javascript css i'll try to make a video on it and also make sure to like share and subscribe and comment with any feedback we have so that's it thank you

Channel: Fayaz Ahmed

Views: 248

Keywords: vue, javascript, tailwindcss, css, vuejs, tailwind, frontend, web, development, coding, programming

Id: RhXMtdymVnU

Length: 12min 34sec (754 seconds)

Published: Mon Aug 16 2021