This episode is for members only

Sign up to access "Building Modals in Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
04. Using a trait for multiple modals

Transcript

00:00
So we've got a working solution, but at the moment, it's not entirely flexible. Let's go ahead and create our second modal and see what we would do in that case.
00:10
Okay, so let's go ahead and just use Livewire here to make out a second modal. We'll just keep the name really boring and call this second modal. And we kind of want to put that in. Yeah, so let's just go ahead and remove that. So delete and yeah, and let's go ahead and put this in modals.
00:33
Great. Okay, so we've got our second modal. We know that we need to register this somewhere globally. So let's go ahead and do that first second modal. We know that inside of the second modal template, we need to use that wrapper. So let's just steal our first modal and go ahead and put that in there.
00:51
And we'll call that second modal. And that's pretty much it. We can now trigger this from anywhere, but we kind of can't because we need the functionality inside of this to show and hide it. So we're going to come up with a really simple solution here. Let's come over to our first modal. All we need to trigger a modal is to know if it's visible,
01:14
to show it and to hide it eventually. We've not even used this yet, but we will be. So we're actually going to extract this out and just put it in a trait. So let's go ahead and get rid of all of this. And let's go over to our live wire directory here under under our app. And we'll create our traits folder. And inside of here,
01:33
we'll just say is modal dot PHP. Okay, so let's create this trait out. So trait is modal. And inside of here, we'll just paste in everything that we've done. Now we need to bring in our on attribute because that exists from live wire. So let's make sure we pull this in at the top. And of course, we're going to go ahead and give this a namespace as
01:53
well. So app. And that's now under live wire and under traits. Great. So back over to our first modal, we just want to use is modal. Obviously, make sure we put it in at the top, we can get rid of this now. And that's it. So now every time we want to create a modal, we just use this trait and it contains all of the functionality we need for this to actually exist as a modal. So over on
02:17
our second modal live wire component, we want to do the same thing is modal. And that's it. So now we can trigger this modal from anywhere, we create a modal, we add the trait, we register it, and we're done. So if we come over to our dashboard, let's go ahead and add in another button here to trigger this second modal. And I'm just going to wrap these
02:40
in div just so we can space these out a little bit better. And there we go. Okay, so this is our second modal that we want to trigger. So we're going to say second modal, and open second modal, and we're done. Let's head over, click on this. And there we go. There's our second modal, which we can close. There's our first modal, which we can close as well.
11 episodes1 hr 1 min

Overview

Build your own modal functionality in Livewire, completely from scratch!

We’ll cover creating a re-usable modal wrapper, transitions, triggering modals from anywhere with our own Alpine functionality, trapping focus inside modals, layering modals correctly, and more.

Alex Garrett-Smith
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!

Comments

No comments, yet. Be the first to leave a comment.