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
01. Introduction
02. Designing the board
03. Sorting stuff
04. Managing the board
05. Archiving
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.
31 episodes•2 hrs 27 mins•11 months ago
Overview
Get ready to master drag and drop sorting in Livewire, by building a Trello clone.
We’ll start out by building the interface completely from scratch, then add the ability to sort columns and cards, including moving cards around columns. As we sort everything, we’ll keep the database perfectly updated with the new order.
Our Trello clone will also allow us to edit column titles inline, edit cards and add notes, archive cards and columns, and put them back on the board.
Alex Garrett-Smith
Hey, I'm the founder of Codecourse!
Episode discussion
No comments, yet. Be the first!