Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/aristridely/slideover

Livewire component that allows you overlapping multiple slideover panels simultaneously.
https://github.com/aristridely/slideover

laravel livewire livewire-components multiple-slideovers slide-in-panel slide-over slideover

Last synced: about 1 month ago
JSON representation

Livewire component that allows you overlapping multiple slideover panels simultaneously.

Awesome Lists containing this project

README 

        
## What is?

A package that allow overlapping (virtually) infinite slideovers simultaneously with configurable widths. 

This package is based upon wire-elements/modal (thanks [Philo Hermans](https://github.com/philoNL)).



## Installation

To get started, require the package via Composer:

```

composer require aristridely/slideover

```



## Livewire directive

Add the Livewire directive `@livewire('livewire-ui-slideover')` to your template.

```html



    



    @livewire('livewire-ui-slideover')



```



## Alpine

Requires [Alpine](https://github.com/alpinejs/alpine). You can use the official CDN to quickly include Alpine:



```html



```



## TailwindCSS

The base slideover template is made with TailwindCSS. If you use a different CSS framework I recommend that you publish the slideover template and change the markup to include the required classes for your CSS framework.

```shell

php artisan vendor:publish --tag=livewire-ui-slideover-views

```



## Creating a slideover

You can run `php artisan make:livewire EditUserSlideover` to make the initial Livewire component. Open your component class and make sure it extends the `SlideoverComponent` class:



```php



Edit User



Edit User



Edit User

```



## Passing parameters

To open the `EditUserSlideover` slideover for a specific user we can pass the user id (notice the single quotes):



```html



Edit User



Edit User



Edit User



Edit User

```



The parameters are passed to the `mount` method on the slideover component:



```php

user = $user;

    }



    public function render()

    {

        return view('livewire.edit-user-slideover');

    }

}

```



## Overlapping slideover

From an existing slideover you can use the exact same event and another slideover will stack onto the first:



```html



Delete User

```



## Closing a slideover

When you are done with the current slideover, you can close it by emitting the `closeSlideover` event. 

This will always close the most recent (in the foreground) slideover. 

(N.B. at the moment, each time you close a slideover, the relative component's state will be destroyed).

```html

Close

```



You can also close a slideover from within your slideover component class:



```php

user = $user;

    }



    public function update()

    {

        Gate::authorize('update', $user);



        $this->user->update($data);



        $this->closeSlideover();

    }



    public function render()

    {

        return view('livewire.edit-user-slideover');

    }

}

```



## Configure slideover width

You can change the width of the slideover in 2 ways. 

(N.B. At the moment the width of the slideover is configurable by a CSS class, in this case a TailwindCSS one).

### Static way

Declare this method inside your class. 

Usefull when you know the slideover will always have the same width.

```php

public static function slideoverWidth(): string

{

    return 'w-11/12';

}

```



### Dynamic way

This approach is usefull when the slideover is opened on top of another slideover and you want to let the background one visible adapting the width of the new slidevoer in the foreground.

```html

{{-- Blade View --}}

@php

    $slideoverData = json_encode(['user' => $user->id]);

    $slideoverAttributes = json_encode(['width' => 'w-8/12']);

@endphp



Delete User

```



## Difference with wire-elements/modal



At the moment some feature of the `wire-elements/modal` package are disabled:

- closing slideover with `escape` key

- closing slideover by clicking outside of it (close on click away)

- dispatching events on slideover closing

- skipping previously opened slideover



## Combine with wire-elements/modal

This package can be used together with `wire-elements/modal`. The recommended way is to declare it before the modal package, as follow:



```html



    



    @livewire('livewire-ui-slideover')

    @livewire('livewire-ui-modal')



```

This will ensure that the modal element will always be on top of the slideover one.

Because of this joined usage the aformentioned capabilities of a slideover of closing on escape and on clickaway are disabled at the moment (they would have collide with the modal behavior). 

E.g. If a modal is opened on top of a slideover, by pressing `escape` both will be closed. 

A future solution will be investigated.



## Configuration

You can (partially) customize the Slideover via the `livewire-ui-slideover.php` config file. 

(Actually only default width class).



 To publish the config run the vendor:publish command:

```shell

php artisan vendor:publish --tag=livewire-ui-slideover-config

```



- [ ] complete example

- [ ] demo gif