Learn Alpine.js
Playing
03. Visibility

Episodes

0%
Your progress
  • Total: 2h 10m
  • Played: 0m
  • Remaining: 2h 10m
Join or sign in to track your progress

Transcript

00:00
Let's talk about visibility.
00:01
Usually with a library like Alpine, you want to hide and show things based on a state, whether that's you want to click to reveal a drop-down menu or click to reveal some kind of text.
00:12
And that's exactly what we're going to look at now. So we're going to kind of dive into events on our click events, things like that. But let's look at a really simple example to start with.
00:22
Once again, we're going to go ahead and create just a standard div here. We're going to initialize this with x data. And we're going to have our object inside of here.
00:30
And this is going to be a Boolean, which is called visible. So something needs to be shown based on this value. Alpine does have if statements, but usually they
00:41
are a very specific use case. What you'd normally want to do is use x show. So let's go ahead and create another div inside of here with some content.
00:51
And we want to show this based on that Boolean value. So what we'd do is we would use x show. And then again, we can put any expression inside of here. This doesn't have to just reference
01:03
a value from the local scope. So for example, we could just write x show visible. Now obviously, if we go over, that's false at the moment. So it's not going to be shown.
01:14
You will see a slight flicker here. Don't worry about that too much at the moment. We'll talk about that later. But if we change this over to true and come back over,
01:22
sure enough, that is always shown now. So let's look at an example of using a slightly different value inside of here. So for example, let's just say we
01:32
had a list of records that we'd pulled in from an API or something like that. And we'll be touching on that later. We want to only show these records
01:40
and iterate through them if these records actually have some kind of content. So for example, rather than just referencing records, we could just pass the length of this in here and even
01:51
a more complex expression like greater than or equal to 1. If we come over, sure enough, we see that some content in there. And of course, we get the flicker of the other one. But don't worry too much about that.
02:01
So let's just comment that out while we're here. So there we go. We see that. And of course, if records was completely empty,
02:07
we would expect not to see that until we got them fetched in. So now that we know how to actually get that working, let's look at a click event so we can actually see this work by clicking something.
02:20
So again, we're going to go ahead and use xdata here. We're going to have visible. Or in our case, we might naturally call this show. So we're going to say show false.
02:29
We're going to have some content in here which depends on that. So we're going to say show this content in here if that's true. Of course, at the moment, it doesn't show because it's false. And then we want some kind of button or anchor in here
02:42
which, when we click it, shows that content. So let's just write show inside of here. And now with this button, what we want to do is modify the value of show.
02:52
What Alpine will then do is react to the change of this, and it will show this. So let's go ahead and see how this works. Let's say x on, and then we're going
03:01
to go ahead and give the event, the JavaScript event. In this case, it's click. So let's go ahead and say show equals true. So we're reassigning the value show inside of xdata to true.
03:14
And when that happens, that's going to go ahead and refresh everything. And you can see, sure enough, when I click that, we show the content.
03:21
Now with this, you can build up some pretty powerful features. So for example, we could take this, and I'm just going to duplicate this down here so we've got a reference to it.
03:29
We could toggle this instead. So let's just say that this was to toggle something like a menu bar. Well, in this case, we want to assign it
03:37
to the opposite of what show currently is. So we can just say not show. So if this is true, that will be false. If it's false, that will be true.
03:45
So now if we come over and give this a refresh, we can click on this to actually toggle the content. Let's take a look at a slightly more complex example. So again, let's comment this out and just paste
03:55
what we had down here. And let's just say that we had a number in here that we wanted to increment. Let's say by default, that was maybe 0.
04:03
And we wanted to show that increment value in here. We're going to use xtext. And we're going to reference the number. So we don't actually need any content inside of here.
04:15
We'll, of course, just show the value that we currently have. So at the moment, it looks something like that. Now, for this button here, we actually want to increment, not toggle this.
04:26
So to increment this, let's think about what we've already learned. x on click does something. So easily, what we can do now is just say number plus plus
04:35
or number equals number plus 1 or whichever increment you're going for. That's going to go ahead and increment that value. What we can now do, though, is we
04:42
could create another div down here. And we could say x show. And we could show a message if this number is big, for example. So we could say, well, if the number is greater than or equal
04:53
to 10, we might want to show that's a big number, for example. Silly example, but hopefully you get the point. So if we go ahead and increment this all the way up,
05:02
that's going to not only increment this, but react to the fact that that value has changed. And it's going to show a different message. So really, just with a few lines of code
05:11
here and some really simple JavaScript expressions and event handlers, we've created something that would traditionally be quite difficult to do with JavaScript on its own.

Episode summary

In this episode, we're diving into how to control what your users see (or don't see) on your page using Alpine.js. We'll start off with a super basic visibility toggle: think drop-down menus or expanding/collapsing info panels, all based on a little bit of state and a sprinkle of JavaScript.

You'll learn how to use Alpine's x-show directive to show or hide stuff depending on the value of a boolean variable, and we'll see how you can use more complex conditions to make your UI smarter—like showing content only when you have actual data available.

Once that's all clear, we ramp things up by adding some interactivity: you'll see how to reveal content when a user clicks a button, and how to toggle things on and off with just a tiny change to your code. We also take a quick detour to build a simple counter and make the page react to its value, even showing special messages once you hit a certain number.

By the end, you'll see how you can build responsive and interactive UI elements with just a few lines of Alpine, without all the JavaScript headaches you'd normally have to deal with. It's all about practical, hands-on examples that you can drop right into your own projects. Let's get into it!

Episode discussion

No comments, yet. Be the first!