Modals in Inertia
This episode is for members only

Sign up to access "Modals in Inertia" right now.

Get started
Already a member? Sign in to continue
Playing
05. Customising individual modal containers

Episodes

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

Transcript

00:00
So this is going to be a really super quick tip here. We want to be able to customize our modals from outside of the container.
00:07
So let's just take a look at the modal that we've created here. We've set a max width of medium. What happens if we wanted a slightly larger container, like this?
00:17
Well, we can't really control this from each individual modal at the moment. Now, you might be thinking, well, over in our example here, surely we could just apply some classes directly to here.
00:28
So we could set a max width of large. Let's do extra large just so we can see the difference. But that doesn't do anything. By default in Vue, when you pass a class down
00:38
and it's inherited, this will be inherited at the very root level, which at the moment is just our transition route. So that's not really any good. Now, to get around this, what we can do
00:48
is choose specifically where we want these attributes to be inherited to. And that is our dialog panel. We want to override any of these styles on here.
00:58
We're not really concerned about overriding the overall transition or the background or anything like that. The dialog panel is the thing that we want to style up.
01:05
So to do this, we just use vbind. And then we take in the attributes that get passed through to this overall modal component, which are here.
01:15
And they will then get put into this part here. So this will bind in and override the classes or add, at least, the classes that we choose. So now, when we come over, you can see at the moment
01:27
that this is not quite right. The reason for this is what we would have to do is override these with important selectors. There are ways that we can get around this.
01:36
But the majority of the time, your modals are just going to be the same size. But in our case, we are going to override this. Now, you could get around this by not including things
01:46
that you're going to generally customize a lot. So for example, you could get rid of max width medium. And you could always have this to provide the width of this. So you could just have that as a general thing
01:57
that you have to implement. So if we didn't implement this, it would just look like this. And then, as a developer, when you're creating a new modal, you would come in and say, well, I
02:06
want a max width of medium for this particular one. And then you could apply the styles. So it's really up to how you're going to build this. But the majority of the time, we're
02:14
going to keep the same width. So I'm going to include this in here. And then I'm going to override this with an important just for this instance of this modal.
10 episodes• 46 mins

Overview

Effortlessly add modals to your Inertia applications with the momentum-modal package.

In this course, we’ll get modals set up, design a customisable modal container with transitions, then cover everything you need to know about working with modals in your Inertia applications.

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

Comments

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