ویو جی اس

Modals with the TALL Stack

Modals with the TALL Stack

For such a simple concept, modals can often be tricky to implement. Where exactly do we place them? Where should the event listeners to toggle their display be stored? And how to we make them dynamic? In this series, one piece at a time, we'll discuss everything you need to know about modals within the TALL (Tailwind, Alpine, Laravel, Livewire) stack.



سطح متوسط 8 جلسه آموزشی 01:08:00 ساعت
01
قسمت 1

The HTML and CSS for a Basic Modal

Let's get started by quickly writing both the HTML and CSS for a basic modal. It won't be perfect, but this should be enough to get us going. We'll use Tailwind to quickly apply the necessary classes.

02
قسمت 2

Make it a Blade + Alpine Component

Now that we have the beginnings of a modal, let's extract all of that HTML into a Blade component. Once complete, it only takes a few characters to add Alpine support.

03
قسمت 3

Technique #1: A URI Hash Toggles the Modal

Before we review Livewire integration, let's first learn how to use the URI hash as a technique for toggling the display of any modal on your site.

04
قسمت 4

Use Alpine to Intercept a Form's Submission

In this episode, we'll use Alpine to intercept the submission of a form, and then display a confirmation modal to the user.

05
قسمت 5

Technique #2: Manage Modal State With Livewire

Let's review a different way to manage and toggle a modal's state: Livewire. Livewire is magic in the best possible way.

06
قسمت 6

Livewire And Alpine Synchronization

In its current form, our modal is missing a number of expected features. For example, when I click outside of the modal card, it should close. If I press the escape key, it should also close. These are basic conveniences that any modal should provide. As we solve this problem, we'll have the opportunity to review Livewire's @entangle directive which will allow us to synchronize a property's value between Livewire And Alpine. If its value changes on one end, the other will update as well.

07
قسمت 7

Basic Alpine Transitions

Let's set aside five minutes to quickly improve the design and flow of our modal. In particular, we'll combine Alpine and Tailwind to quickly apply a nice-enough looking scale and fade transition to the modal card, itself.

08
قسمت 8

A Full Example

Let's finish up by making the modal a bit more dynamic. We'll start by pulling in a Tailwind UI table layout to simulate a typical user management page. We'll then add a "Delete" button that should trigger a confirmation modal with details for the associated user.

دوره در حال اجرا

این دوره هنوز به پایان نرسیده است و در آینده درس های دیگری به آن افزوده خواهد شد.