README

Livewire Slide over Panel

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, a livewire component that renders modals with state management on livewire. If you've already used it, then the behavior is the same, except that instead of a vil modal, it will open a drawer.

Installation

To get started, require the package via Composer

composer require laravelcm/livewire-slide-overs

Usage

Add the Livewire directive @livewire('slide-over-panel') directive to your master layout.

<html>
<body>
    <!-- content -->

    @livewire('slide-over-panel')
</body>
</html>

Creating a Slide Over

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');
    }
}

Opening a Slide over

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: 'shopper-cart' })">View cart</button>

<!-- Inside 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>

Configuration

wip...

Test

wip..

composer test

Credits

License

Livewire Slide Over is open-sourced software licensed under the MIT license.

laravelcm / livewire-slide-overs

Maintainers

Details