Livewire Slide Over Panel is a Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.
This package is inspired by wire-elements/modal. If you've already used it, then the behavior is the same, except that instead of a modal, it will open a drawer (slide over).
- PHP 8.3 or higher
- Laravel 11.x or 12.x
- Livewire 3.4 or 4.x
To get started, require the package via Composer:
composer require laravelcm/livewire-slide-oversAdd the Livewire directive @livewire('slide-over-panel') to your template layout:
<html>
<body>
<!-- content -->
@livewire('slide-over-panel')
</body>
</html>You can run php artisan make:livewire ShoppingCart to make the initial Livewire component. Open your component class and make sure it extends the SlideOverComponent class:
<?php
namespace App\Livewire;
use Laravelcm\LivewireSlideOvers\SlideOverComponent;
class ShoppingCart extends SlideOverComponent
{
public function render()
{
return view('livewire.shopping-cart');
}
}To open a slide over you will need to dispatch an event. To open the ShoppingCart slide over for example:
<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openPanel', { component: 'shopping-cart' })">View cart</button>
<!-- Inside an existing Livewire component -->
<button wire:click="$dispatch('openPanel', { component: 'shopping-cart' })">View cart</button>
<!-- Taking namespace into account for component Shop/Actions/ShoppingCart -->
<button wire:click="$dispatch('openPanel', { component: 'shop.actions.shopping-cart' })">View cart</button>You can pass data to the slide over component by adding an arguments object to the dispatch event:
<button wire:click="$dispatch('openPanel', { component: 'edit-user', arguments: { user: {{ $user->id }} }})">
Edit User
</button>The arguments will be passed to the mount() method of your slide over component:
<?php
namespace App\Livewire;
use App\Models\User;
use Laravelcm\LivewireSlideOvers\SlideOverComponent;
class EditUser extends SlideOverComponent
{
public User $user;
public function mount(User $user)
{
$this->user = $user;
}
public function render()
{
return view('livewire.edit-user');
}
}Model binding is automatic - just type-hint the model and pass the ID as the argument.
From within your slide over component, you can call $this->closePanel():
public function save()
{
// Save logic...
$this->closePanel();
}If you have multiple slide overs open and want to close them all at once, use forceClose():
public function save()
{
$this->forceClose()->closePanel();
}You can skip one or more previous panels in the stack:
// Skip the previous panel
$this->skipPreviousPanel()->closePanel();
// Skip multiple panels
$this->skipPreviousPanels(2)->closePanel();
// Skip and destroy the skipped panels
$this->skipPreviousPanels(2)->destroySkippedPanels()->closePanel();Close the panel and emit events to other components:
// Emit a simple event
$this->closePanelWithEvents(['refreshList']);
// Emit event to a specific component
$this->closePanelWithEvents([
'user-table' => 'refreshList',
]);
// Emit event with parameters
$this->closePanelWithEvents([
['refreshList', ['user' => $this->user->id]],
]);You can customize the slide over behavior by overriding static methods in your component:
<?php
namespace App\Livewire;
use Laravelcm\LivewireSlideOvers\SlideOverComponent;
class EditUser extends SlideOverComponent
{
// Set the max width (sm, md, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl)
public static function panelMaxWidth(): string
{
return '2xl';
}
// Disable closing by clicking away
public static function closePanelOnClickAway(): bool
{
return false;
}
// Disable closing on escape key
public static function closePanelOnEscape(): bool
{
return false;
}
// Make escape key close only the current panel (not force close all)
public static function closePanelOnEscapeIsForceful(): bool
{
return false;
}
// Dispatch a close event when the panel is closed
public static function dispatchCloseEvent(): bool
{
return true;
}
// Destroy the component state when closed
public static function destroyOnClose(): bool
{
return true;
}
public function render()
{
return view('livewire.edit-user');
}
}You can publish the configuration file:
php artisan vendor:publish --tag=livewire-slide-over-configAvailable configuration options:
return [
// Include the package CSS (set to true if not using TailwindCSS)
'include_css' => false,
// Include the package JavaScript
'include_js' => true,
// Slide over position: Position::Right or Position::Left
'position' => Position::Right,
// Default component settings
'component_defaults' => [
'slide_over_max_width' => 'xl',
'close_slide_over_on_click_away' => true,
'close_slide_over_on_escape' => true,
'close_slide_over_on_escape_is_forceful' => true,
'dispatch_close_event' => false,
'destroy_on_close' => false,
],
];The slide over uses TailwindCSS classes. If you use TailwindCSS in your project, you need to configure it to scan the package views.
Add the package views using the @source directive in your CSS file:
@import "tailwindcss";
@source "../vendor/laravelcm/livewire-slide-overs/resources/views";Add the package views to your tailwind.config.js content array:
module.exports = {
content: [
// ...
'./vendor/laravelcm/livewire-slide-overs/resources/views/**/*.blade.php',
],
// ...
}If you don't use TailwindCSS, set include_css to true in your configuration file to include the precompiled styles.
composer testLivewire Slide Over is open-sourced software licensed under the MIT license.