Building a slide-over panel component with Livewire


I have been a fan of Laravel Livewire since it was first released, and I have used it many times to create great user interfaces for applications. One of the things I find I do a lot is create extracted components that I can pass others into – so that I don’t have 20 different modals or slide-overs, for example.

In this tutorial, I will walk through how you can create a slide-over component for your TALL Stack applications so you, too, can implement this approach.

I will assume that you have already installed Laravel and Livewire and have a basic application set up. I will use Tailwind UI and Tailwind CSS for the styling because I have no idea how to design anything.

Let’s start by creating a generic component in Livewire called SidePanel, which will contain all the code and controls required to open and close the panel. Let’s get building.

1php artisan livewire:make SidePanel --test

We first need to have the state available so it can be either open or closed, which I am sure you will agree is a vital aspect of a side panel.

1declare(strict_types=1);

2 

3namespace App\Http\Livewire;

4 

5use Illuminate\Contracts\View\View as ViewContract;

6use Illuminate\Support\Facades\View;

7use Livewire\Component;

8 

9final class SidePanel extends Component

10{

11 public bool $open = false;

12 

13 public function render(): ViewContract

14 {

15 return View::make(

16 view: 'livewire.side-panel',

17 );

18 }

19}

Here we have a standard Livewire component, customized to my very opinionated way. We have one property so far called open – which we will “entangle” on the front-end using AlpineJS. We need a couple of other properties to allow us to display the panel and not crash if a component is not passed.

1declare(strict_types=1);

2 

3namespace App\Http\Livewire;

4 

5use Illuminate\Contracts\View\View as ViewContract;

6use Illuminate\Support\Facades\View;

7use Livewire\Component;

8 

9final class SidePanel extends Component

10{

11 public bool $open = false;

12 public string $title = 'Default Panel';

13 public string $component = '';

14 

15 public function render(): ViewContract

16 {

17 return View::make(

18 view: 'livewire.side-panel',

19 );

20 }

21}

We have a default title and a component property that allows us to choose what component is loaded. This way, other components talking to it can tell it what to load and pass a title to be displayed. Let’s take a look at the template for this component:

1<section

2 x-data="{ open: @entangle('open') }"

3 @keydown.window.escape="open = false"

4 x-show="open"

5 x-cloak

6 class="relative z-10"

7 aria-labelledby="slide-over-title"

8 x-ref="dialog"

9 aria-modal="true"

10>

11 

12 <div

13 x-show="open"

14 x-cloak

15 x-transition:enter="ease-in-out duration-500"

16 x-transition:enter-start="opacity-0"

17 x-transition:enter-end="opacity-100"

18 x-transition:leave="ease-in-out duration-500"

19 x-transition:leave-start="opacity-100"

20 x-transition:leave-end="opacity-0"

21 class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity"

22 ></div>

23 

24 <div class="fixed inset-0 overflow-hidden">

25 <div class="absolute inset-0 overflow-hidden">

26 <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">

27 

28 <div

29 x-show="open"

30 x-cloak

31 x-transition:enter="transform transition ease-in-out duration-500 sm:duration-700"

32 x-transition:enter-start="translate-x-full"

33 x-transition:enter-end="translate-x-0"

34 x-transition:leave="transform transition ease-in-out duration-500 sm:duration-700"

35 x-transition:leave-start="translate-x-0"

36 x-transition:leave-end="translate-x-full"

37 class="pointer-events-auto w-screen max-w-md"

38 @click.away="open = false"

39 >

40 <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">

41 <header class="px-4 sm:px-6">

42 <div class="flex items-start justify-between">

43 <h2 class="text-lg font-medium text-gray-900" id="slide-over-title">

44 Panel title

45 </h2>

46 <div class="ml-3 flex h-7 items-center">

47 <button

48 type="button"

49 class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"

50 @click="open = false"

51 >

52 <span class="sr-only">Close panel</span>

53 <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">

54 <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12"></path>

55 </svg>

56 </button>

57 </div>

58 </div>

59 </header>

60 <article class="relative mt-6 flex-1 px-4 sm:px-6">

61 @if ($component)

62 @livewire($component)

63 @else

64 <div class="absolute inset-0 px-4 sm:px-6">

65 <div class="h-full border-2 border-dashed border-gray-200" aria-hidden="true"></div>

66 </div>

67 @endif

68 </article>

69 </div>

70 </div>

71 

72 </div>

73 </div>

74 </div>

75</section>

Here we have quite a bit of markup to control how it looks and behaves, using @entangle to communicate between AlpineJS and Livewire. We check to see if component has been set and, if not, display an empty state. Next, we need to trigger this from other components – sending it some data so we can choose a component to load and a title to set. This will work from either Livewire or Alpine, but in my example, I will use another Livewire component to trigger opening the panel.

1$this->emit('openPanel', 'New Title', 'component.name.with-namespace');

We pass three parameters using the emit method. Firstly, the event name we are firing. Secondly, the title for the panel. Lastly, we want to pass the component itself as if we were loading it using the livewire directive in your view.

Now we need to ask our Side Panel component to listen for this event and have a method that will handle the logic of updating its properties.

1declare(strict_types=1);

2 

3namespace App\Http\Livewire;

4 

5use Illuminate\Contracts\View\View as ViewContract;

6use Illuminate\Support\Facades\View;

7use Livewire\Component;

8 

9final class SidePanel extends Component

10{

11 public bool $open = false;

12 public string $title = 'Default Panel';

13 public string $component = '';

14 

15 protected $listeners = [

16 'openPanel'

17 ];

18 

19 public function openPanel(string $title, string $component): void

20 {

21 $this->open = true;

22 $this->title = $title;

23 $this->component = $component;

24 }

25 

26 public function render(): ViewContract

27 {

28 return View::make(

29 view: 'livewire.side-panel',

30 );

31 }

32}

With the listener accepting all of the required parameters and Alpine handling the open and closed state – we can close this panel and replace the shown component.

This approach has allowed me to create clean user interfaces that open a separate component as and when needed. Also, the component we pass through to the panel can still be used as an isolated component for a view.

How do you handle these use cases in your projects? How do you think this will change in Livewire v3? Let us know your thoughts on Twitter.

Source link

Share

Leave a Reply

Your email address will not be published. Required fields are marked *