Build a Trello Clone With Livewire
This episode is for members only

Sign up to access "Build a Trello Clone With Livewire" right now.

Get started
Already a member? Sign in to continue
Playing
17. Building a modal wrapper

Episodes

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

Transcript

00:00
Before we do anything useful with this modal, let's create out a common wrapper that we can use for all of our modals and also introduce the ability to click to close this modal as well.
00:10
Okay. So to do this, we're going to create out a component. You'll also notice that within the components that we already have with Laravel Breeze, this does give us a modal component, but it's very specific
00:22
to Breeze and the way that it works. So what we're going to do is create our own wrapper and use the modal functionality that we pulled in. Buy that package.
00:31
So we're going to make out a component and let's call this modal wrapper. We'll create this as a view because we don't need a class associated with it. And let's change this over to X modal wrapper. We'll want to give a title in here.
00:45
So every time that we create a new modal, we can just wrap everything in this, give it a title. So we're going to call this edit card. Okay.
00:53
If we head over to our modal wrapper, let's style this up. So it looks a little bit better. So on the outside, let's give this a padding of six, and we're going to have our default slot just down the bottom here.
01:04
So let's go ahead and output our default slot content. And just by doing that, we will now have created a wrapper with a little bit of padding. And we can add stuff like a close button as well.
01:14
So at the top, let's go and output this title. So we'll make this flex item center because we want a close button on the very right hand side. So let's say justify between, and we'll say margin bottom of six, just
01:28
to push it away from everything else. In here, we'll have the header that could either be an H1 or H2. And in here is just going to be the title prop that we passed in. We'll go ahead and make this a little bit bolder.
01:40
So let's say font semi bold, and we'll set the text to large. Okay. So that should be enough now to show that title. And yeah, there we go.
01:49
Okay. Let's create the button to close this modal. Let's just do this really roughly for now and just write close. And let me show you how to close a modal off with this package.
01:58
So we're going to go ahead and dispatch, and we're just going to dispatch a close modal event. That's pretty much all we need to do unless things get more complex. So now, as well as clicking outside the modal, we can also
02:10
click here to close it as well. Okay. So we're going to go and pull in an icon for this. So let's find a close icon and let's go and just pop this directly into here.
02:20
And once again, we'll just change around some of the styling. Let's set this to size of five and we should be good. So let's head over, try this out and yeah. So by default within a modal like this, the first thing is
02:36
going to be selected and focused. Once we get to building our form, that won't be the case because it will be our input that we want focused. But for now, at least we have a nice wrapper.

Episode summary

In this episode, we start by addressing the need for a reusable wrapper for our modals. Rather than relying on the default modal component provided by Laravel Breeze (which is pretty specific to its own setup), we go ahead and build our own ModalWrapper component. This will give us a consistent, customizable foundation for any modal we want to implement throughout the application.

We walk through creating this as a view (no class necessary), making it easy to drop in content and pass a title prop—so every modal can have its own heading. We set up some basic but neat styling using padding and flex, making the modal look and feel tidy. The layout also accommodates a close button, which we add up in the header, styled to look nice and sit neatly to the right of the title.

For closing the modal, we show how to wire up a button that dispatches a close-modal event from the included modal package, making it super easy for users to dismiss the modal either by clicking outside of it or by hitting the close button (with an icon for that extra polish!).

By the end of the episode, we have a clean, reusable modal wrapper, complete with a header, close button, and a slot for whatever content we want to display inside. It's a solid starting point for building out more complex modals, like forms, in the next lessons.

Episode discussion

No comments, yet. Be the first!