Building an accordion using VUEJS and Tailwind CSS | Manoj Singh Negi | Recraft Relic

hey guys welcome to recreate channel and i hope you are doing well so today we are going to build an accordion in vue.js and yeah let's get started uh but before start uh i'll just say if you like what i do each and every saturday uh i'll say like the video share the video and subscribe to the channel so i you can you know just keep uh you know just be updated with whatever i put in on every saturday and yes you know please provide your suggestions if you want me to cover some topic uh please provide me that uh you know suggestion and i will try to cover that you know on upcoming live coding sessions all right with that being said let's get started uh i already have a vue.js uh application setup here uh and i already have a tailwind uh css cdn already implemented here so let's start this project uh right here's my terminal i'll go to my projects um live accordion right and i'll just say yanser so basically the idea is to build accordion so when you click so if you don't know what is uh what an accordion is so basically it's a you know it's a kind of like a drop down when you click on the title it expand to show you information so that's what we're going to build and i think the server is started so let's go to the server uh right here so you can see the hello world right so let's get started uh with you know firstly centering it out like centering the you know uh the page centered on the page so i what i'm going to do is this hello world i'm just going to change this with a div and so this will be like the main parent div which will hold all the accordion so we'll just center it out you know and because i'm using tailwind i can use tailwind classes so i can just say with one by two so making it like half of the page and i'm auto to center it out you can see and yeah that looks good uh all right so this is a parent component now let's create a recording component so not only folder new file accordion dot view and let's define a template and just say accordion accordion and now let's go here define our script this one i guess yeah and just say name equal to accordion uh nothing else and i think that's it in that view we have to import this according component so i'm just going to say in import accordion from dot slash on dot slash components uh component slash accordion dot view great accordance different but never used i know so i'm just going to say [Music] components right and just say accordion and uh it's registered now but instead of this i'm just going to say accordion right and you can see the accordion uh being rendered there so now uh let's uh you know let's uh you know do some styling in here so we have accordion here i'm just going to give it so this is basically going to be the title so for example i'll just say this is um this is some collection of information uh let's say this is a this is an accordion right and now we're just going to do class uh because we are using tailwind we can use taylor classes so i'm just going to give it bg green 600 let's see how that goes i'm going to give it text white i'm going to give it some padding p5 maybe yeah and i'm going to make it rounded as well uh p5 is bit too much i'll just going to do p4 and i'm going to make it bold so font bold yeah so this looks good this is good for a title now what i want to do is i want to wrap it inside a div okay so let's wrap it inside a div so this will be the parent div so it is going to hold our title and as well the content so this is the different title now let's define a div for the content as well and this will basically hold our content for content i'm going to use slot tag so if you don't know what a slot tag do in vue.js so basically it is used for you know rendering children's for example so if i go here and i say you know whatever child i'm going to put here is going to be visible there so element is missing and it is here so yeah you can you can see right so the basically slot what what slot do is it going to take all these children and uh going to render here so it basically makes a complement dynamic uh or reusable uh you know so you can pass like any kind of children you want to the component all right so that's being said we are using slot now uh let's uh style our parent component uh you know a bit first and foremost i'm going to give this one a padding p 10 maybe to give it padding from the top i'll just say pt 10 because it's also giving it from this side right uh pt right now let's go ahead and say let's style our parent component what we're going to do class equal to um border two so border with two and uh you can see the border i'm going to give it a bit of padding p5 is too much let's say p2 right i'm going to make it rounded right and i'm going to i think the watercolor is fine it looks okay and that's fine now for this div i'm going to uh give some margin from the top uh mt4 maybe yeah and i'm going to do same thing i'm going to make uh give it a border give it some panning uh padding and make it rounded this is how it will look basically when it is opened you know so now we have this logic here now let's uh the other thing is that this title this title it is not dynamic you know it is static so for example if i render another accordion here uh you know let's uh i have some lorem ipsum here so i'm just going to use that uh dummy text for example if i'm going to paste this here so you can see you know that content changes but the the title uh you know it stays the same the other thing i want to do is give this div a bit margin from the top as well right to compensate with this so now you can see right this title doesn't change we can change the children's but the title is not changing so for that what i'm going to do is i'm going to pass this title uh you know i'm just going to take this title from the props so what i can basically do is i can put the bulk really basis here and just say title and i'm going to define a prop here props titus which is a string right and then i'm going to go to the app.view dot this and i'm just going to say title because it's not uh you know a dynamic it's a static title so i'm just going to use title this is not a yeah this is a accordion right you can see uh so instead of this is according i'm just going to say right and just reload and uh for this i'm just going to say this concept or whatever so now i'm just going to pass the title again uh this is uh because this is a static uh you know title so i'm just going to use title and we're going to bind it so now uh we have this and now the last part is uh to basically you know make it uh you know close and you know close and open the other thing that i want to show is because this component is reusable now you can actually put it inside another accordion so for example if you have like a multi-nested accordion you can do something like this for example i can have a p element here and i'll say more information and i can just put another accordion in here right save it and you can see right so there is like accordion inside the accordion you know and uh you will see the implication of it when i will basically you know define the logic for opening and closing the accordion all right so let's get started with that um so what i'm going to do is i'm going to say so i'm going to basically take us you know of basically a property in the state so i'm just going to say data return object right and i'm just going to say return is open right and by default it will be false and what we are going to do when it is false so now i'm going to use the class uh attribute the dynamic class attribute of ugs and i'm going to say and if you don't know you can use static class uh attribute and the uh you know the dynamic class had put together so if you if there are classes you which you don't which you know that will not change for sure then you can just put them here and add the dynamic classes here right so i'm going to use uh what i'm going to say is an array do i have to do an array i don't think angle just be something like this is open and so if it is open just say d block uh and if it's uh not then hidden so basically d blocks is display block for tailwind and you can see you know because it's false uh it just you know uh got hidden right and hidden is the the property for making display none you know of an any complaint this is for tailwind uh and if i make it true and you you can see all of these basically expands so now for start it will be false and then what we're going to do is um on click of this div this title so i'm just going to say we on click is open equal to not is open right so i'm just going to say that i'm going to go here one other thing i want to do is i want to make it cursor pointer so we know that we have to click on this title to expand cursor pointer right so let's reload let's see if that works yeah now if i click it you can see you know it opening if i go here click it as well then you can see you know the um component being you know expanded if i click this and uh one important thing to understand here is that because these components are different instances they have different states so for example if i open this one it doesn't affect the other components you know because they have like everybody have their own internal state right and i can click on this to you know close this close this and go here i can add another multi nested accordion if i want to so for example i just can go here and say something like this right and once if i open it if i open this then you can see another nested accordion so yeah guys this was pretty much it uh this was a short stream today uh but yeah i mean i think this is cool so we basically learned how to create a accordion and as well uh you know how the dynamic classes work and how slot works so yeah i mean that's pretty much it and let me know guys what kind of videos or what kind of topics you want me to cover so i can go ahead and cover those topics and

Channel: Recraft Relic

Views: 856

Keywords:

Id: vYEcJ7sIgJA

Length: 14min 30sec (870 seconds)

Published: Fri Jul 23 2021