Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Lessons:9Length:56 minutes
  • Overview
  • Transcript

2.7 Style Binding

In the previous session we created a nav bar component, and we of course conditionally show or hide a set of links based upon whether or not the user is logged in. Currently the user is logged in, and I want to change the style of these links so that whenever we click on one of the links, it is active, and we will visually show which one of these is active by applying the active class. If we look at the CSS that I pasted in the previous lesson, there is that active class that simply changes the font weight. Now of course, yes, we could accomplish this somewhat with CSS. However, I want to do this with JavaScript because the active class or pseudo class, I should say, would go away anytime we clicked anywhere else on the document. So with JavaScript we can control how the active class is added to the elements. And so there's several different ways that we could approach this particular problem, but I'm going to choose the most straightforward way, if not the most repetitive way. And that is, we are going to keep track of the current item that we click on. And we're gonna use the text of the link. So we have dashboard, profile, and log out. We are going to check the value of current and conditionally apply or remove the active class from those elements. And we do that with some class-binding syntax. We start with the class followed by a colon. And then the name of the CSS class that we want to apply. So in this case that would be active. And then we have a condition. And of course the class will be applied to the condition if evaluates to true. Otherwise it will not be applied, and it might be removed if it was already applied, if that condition evaluates to false. So here we will check to see if current equals dashboard. And if that's the case, then of course, we have the active link, which we can see here in the browser. And the reason why I'm defaulting it to dashboard is because the idea is that whenever this page loads, then we have just logged in, it's going to default to the dashboard. So of course that needs to be active. But we do need to be able to change the value of current whenever we click on these links. And so we can set up the click event listener, we need to prevent the default action from occurring. I wish that they had just gone with prevent, but well. [LAUGH] And we will have a function that simply changes the value of current. So we will have current = 'Dashboard' in this case. Let's put this on a separate line. Actually, let's do it with that there. Okay, so this should work, theoretically. And let's just go ahead and copy and paste that. We do need to make some changes, we have profile here. So it's very repetitive in that we have to check for profile, profile, profile then log out, and log out, and log out. There are better ways to go about this, but this is going to be just fine. And so now if we go to the browser and we click on any one of these links, we can see that whichever one we click on is now active. And that's great. That's wonderful. But let's over-engineer this, because we have a link that is managing its state. Kind of. And so one thing we could do then is convert this a element into another component. One that might have an active prop. And this way the component would be responsible for applying the active class based upon the value of that active prop. So it would look something like this. We would have a nav link where we would have an href prop, so we would have that as a hash there. Then we would have the text of the link. So that would be an empty string. No, it would not. It would be dashboard or profile or so on and so forth. Then we can have the active prop, and this is where we would essentially have this same condition. We'll have current equals dashboard in this case. And then we could listen for an event called activate. And we would call a function called changeActive or no let's call it changeCurrent. So it will be like this. As I said, this is kind of over-engineering it. But this is also going to show us another feature of binding classes to elements. So let's once again copy and paste. We'll need to of course change these, again, we'll have Profile and Profile, at least we've lost the one repetition of having these words here. And since we know what the change current is going to do, let's go ahead and write that. So we will have that, and we'll give an event object, we will set current equal to event.detail, and let's just call it text, because that is, after all, what we are calling the prop. So that kind of makes sense. And let's create that Navlink.svelte file. Now we do need to go ahead and import this, so let me do that before I forget to do so. And then we will implement that component. So the file is NavLink.svelte. So as far as our markup is concerned, it's going to be very simple. We start off with our a element, then we will have our href which will be bound to our href prop. We will have class active, same syntax, but we aren't going to, well, I guess we can do this. Yeah, we'll do this to start with but this is actually unnecessary, and you'll see why here in a minute. And let's also set up the click event. And we want to prevent the Default action from occurring. And in this case we will have a function called handleClick. And then we will have the text. So this will be our template. And we just need our script, although we do need to modify our CSS because we need that active class here. So, let's go back to nav bar, and really we don't need the a styling rule here either, because this is no longer inside of this file, it's inside of this nav link. So, there we go, and now we just need to, let's export first. We will export the href and we will set that as a hash as the default value. Let's also export the text which will be an empty string. And then finally, the active prop, which we will default to false. And then we need to import the createEventDispatcher so that we can dispatch our event that is of course from svelte, and then we need to create our dispatch function by calling createEventDispatcher, and then finally we will implement the handleClick function. And all we are going to do is dispatch the activate event, did I call it activate? I believe I did. Let's take a look, yes. So we will dispatch the activate event and the data that we pass in is just the text there. All right so if we go to the browser let's check this out. Once again, we have the same functionality. So that's great. I guess we ought to prove that this is indeed what's going on. So, inside of handleClick [LAUGH] let's just do alert. And that should be fine. Yeah, okay. So we have that up and running, as well it should be. However, whenever we created this, I said that setting this to active is unnecessary. We can actually get rid of that. And the reason why is because we have a class called active, and we have for all intents and purposes a variable called active. So, as long as we have a class and a variable named the same thing, it's going to essentially bind the active class to the value of our active prop. And if we go back to the browser we see that it works just fine. And so when you want to bind a CSS class to an element, you use class, followed by a colon and then the name of that class. And if you plan on using the shorthand syntax, that's really all that you need.

Back to the top