Svelte Tutorial for Beginners #20 - Reusable Tabs Component

Key Takeaways

I rather gang so the next thing I'd like to do is create a little tap system for two links at the top of our page now one link is going to be to show the current polls and the other link is going to be to show a form to add a new poll so we're creating this tap system so that when we click on the show polls tab it's gonna show the poll list component and when we click on the create new poll tab it's going to show the create new poll form component so we're just going to focus on creating this tab system in this tutorial now there's loads of different ways you could create this there's not one way to create something this is just one way and the way I'm going to do it is by first of all over here declaring a couple of variables so let me do a tabs comment first of all so we know what all this is then I'll create a variable called items and this items variable would be an array and in the array we're going to store what items or what text links we're going to have in the tap system so we're going to have one a tab that says current polls and that's going to be to see the list of polls and the other tab is going to be add new poll and we're going to click on that to create a new poll so now we also need to say which one of these tabs is going to be active to begin with so I'm going to say let and I'm going to call this one active item and set it equal to one of these things right here well by default I want to show the current polls on the screen so I'm going to copy that and paste it here and these two must be exact not current polls with lowercase P they must be exact because we're going to check the difference between them later when we decide what content to show and we'll see that okay so we have these two items now the next thing I'd like to do is create a tabs component so we can pass these in as props so in the source folder I'm going to create a new folder and I'm going to call this shared nine capitols shared and in here we're going to place any kind of components that could be reusable in different parts of the application now we could use a tab system elsewhere because we're not hard-coded in the tabs inside the tabs component that can be set from outside so it becomes reusable and we can just pass whatever tab saying that we want so we're gonna place it in this shared folder let's create a new file called tabs dot spelt oops I've spelled that completely wrong let me rename that so it's tabs dots felts okay then so inside here let's first of all create a script tag and we'll come back to that in a second then we need some kind of HTML template so we'll start that off with a div with a class of taps and we'll come back to that in a second as well and then finally we need a style tag in case we style this up which we weld it all right then so our tabs are essentially going to be a list of items in our case just a list of two items these things right here so if I'm creating a list then I typically use a ul we don't have to but I'm going to use a ul and now what I need to do is cycle through the actual tabs that we're going to have an output a bit of HTML for each one an actual tab now in order to do that I have to pass the tabs in as a prop these things right here the items so let us first save this for now and come over to app dot svelte and import the tabs component so I'm going to duplicate that and change this to tabs then this to the shared folder and this should be tabs as well so we've imported that and we're going to place the tabs probably inside the main thing right here so let's do it tabs component like so and we're going to pass in these things as props so I could say right here that the items are equal to items now remember the shortcut because the variable name and the prop name is the same is just to delete the left side of it and we're still passing the items in as a prop now I'm also going to pass in the active item as well so we'll say active item because I'm sure we'll use that inside the tabs component at some point okay so we're passing that data in as props now inside the tabs component itself we can accept those so let me do that inside the script I'm gonna say export which we need to do in front of any variables which we're accepting as props and then let items and then underneath that we need to also accept the other variable which was I think let me have a look active item yep okay so export let active item cool so we have those two variables now and we can use them now inside the UL I want to output an li tag for each item remember items is an array so we can cycle through these and output a bit of template for each one so all let us now do in each loop we do that by using curly braces hash each then what we want to cycle through items and then I'll name each one item as we see right through so let's close that off by saying forward slash each at the end and then inside I want to output an li tag for each item so let's do that and then inside the Li tag I'm going to actually output the item itself the text of it so I can just use this variable so let me first of all do a div because we're going to use this to apply a class later and then output an item inside it alright so now all we're doing is cycling through the items and output an li tag for each one so if I save this now we should see both of those are right here awesome okay then so what do I want to do next well first of all I want to say whether this current item is active and we can use this active item to determine that to apply a conditional class we've seen how to do that in the past so to apply a conditional class I can say class active so I'm going to apply this class to this div if a certain condition is true and that condition is going to be the item is triple equal to active item so if we cycle through items and currently we're cycling through this one we're going to say okay is current polls equal to active item which is current polls this would be true therefore this is true so we applied a class of active to this div and then we can style this a little bit differently to show the user that this is an active item when it cycles through the second one add new poll well this is not equal to the active item current polls therefore it doesn't apply this class of active so this purely just to style this differently so we user knows which item is active and what content they're seeing on the page so down here let me just add the active class because we're going to style this a little bit differently now first of all I'll give this a different color so that's going to be hash D 9 1 B 4 2 and that should be a ready color yep this red color here now I'm also going to say the border - bottom is going to be 2 pixels and it's gonna be solid and it's going to be the same color so let me copy that bad boy and paste it off right here and then finally the padding - bottom is going to be about 8 pixels okay so if I save this now we should see this styling on the active tab which is current polls ok still looks pretty pants at the meet but we will make this look better in fact we'll do that first of all so lets style this div first of all so tabs oops so taps and then inside will say margin bottom is going to be about 40 pixels that's just so that the content underneath is given some breathing room then it will do the UL and this will display as flex so this is going to automatically put the Li tags left to right and take up the available room on the row of content if you want to learn more about flex if you have a whole series on flex box but I don't want to dive too deeply into it now because we're talking about felts then I'm going to say justify content this is a flex property and it's going to be to the center and then I'm going to say the padding will be 0 and then the list-style-type is going to be not that's to take away the little circle icons that we get on Li tags automatically so let me check this out so far all right looking better now we just need to add a bit of breathing room between those two things and also maybe change the font size so let me now style the Li tags themselves the margin is going to be 0 top and bottom 16 pixels left and right font size about 18 pixels just crank it up a little bit the color is good kind of like a gray color by default obviously the active one overrides that and then we're gonna say the cursor is pointer just so a user knows they can click on it so let's save that and preview okay it looks good so this is the active item at the minute but when we click on these nothing it currently happens now when we click on add new poll what I'd like to do is then emit a custom event from this component and send up the item as data that was clicked on to the app component and then we can take that item and we can update the value of active item to be the item does that make sense so let me first of all import the create dispatcher because we need that to dispatch a custom event so I'm going to say import and it's create event dispatcher we've seen all of this in the past when we talked about custom events and that is from this felt library all right so now we have that we can go ahead and create a dispatch function so I'm going to do that right underneath I'm going to say Const dispatch is equal to create event dispatcher like so and now we can use this dispatch function right here to dispatch a custom event every time a user clicks on one of these Li tags so I'm going to say right here on click and set that equal to some kind of function now we could declare this up here but instead I'm going to do it right down here I'm going to do an inline function because we're going to use this dispatch function and invoke that so we can't do that without an inline function to wrap it otherwise it will automatically invoke itself when the page first starts so let me do that I'm inside the function I'm going to say dispatch and we want to dispatch an event called tab change but you can call it what you want and then the data we're sending with that custom event to the parent is going to be the item so whatever item we're currently iterating so when we click on this we dispatch this custom event tab change and we can listen for that event inside the app component where we output the taps so I could say right now over here on whoops on and then the event was called tab change and set it equal to some kind of function handler so I'm going to say events handle a function so I'm going to call this tab change but you can call the function what you want and then I'm going to create that function over here constant tab change and this is going to take in the event object and it's going to be an arrow function like so and all we want to do inside here is reset the active item equal to whatever item we send right here in the event remember we can grab the data that we send by using the event object and the detail property on that event so I could now say that active item is going to be equal to e dot detail like so and e detail is just the item we send along right here okay so now we've done that when active item changes say we click on add new poll right here we send a new poll as the item value it emits the event will listen to it we call this function and we set active item now to add new poll so when this active item changes what we're sending down here is obviously updated and so therefore active item now is create new poll and so therefore the active class will be given to the second li create new poll right because then the item is equal to that so let's save everything and just test this out I'm going to go to add new poll and it switches if I go to current polls it switches etc so this tab system is now working and that's awesome now we want to show content dependent on what the current item is and we're going to nest that eventually inside Aptos felt the root component so how do we do that exactly well we could check whatever the active item is down here in the main tag using an if statement and then if its current polls which show the current polls component it's add new poll which show the add new poll component so let me just quickly demo this but we'll make it better later on I'm gonna say hash if to do any checking to say if active item is triple equal to current polls so this has to be exactly the same as whatever the active item might be so this or this right and if that's true then we're going to output a paragraph that says Paul list component goes here right and now let me do an else statement so colon else and then if and if active item is triple equal to add new poll so that's the other option right here so if we click on that option then active item becomes that and if active item is equal to that then we'll output something different that is going to be a paragraph and it will say new poll form component goes here now eventually it will nest the poll list component here and the poll form component right here but this is just a demo how these tabs are working for now and finally we need to close this off by saying /if all right then so let's try this out so we can see Paul at list component goes here because this is the active item if we change it then we can see new poll farm component goes here so now we're switching between these two bits of content dependent on the active item and the great thing about this is that this tabs thing right here is reusable so if you wanted to use this elsewhere on your website you could do now because we don't hard-code anything in here any tabs all we do is we set up an items array and we pass that in as a prop right here along with the active item so if we wanted different items going into tabs elsewhere we'd set up different items like this a different active item and just reuse the tabs component passing those things in so now we have that working what I'd like to do in the next video is start on this component right here which is going to be the farm component to add in you Paul