Weave Code
Livewire Slide Overs Laravel Package
laravelcm/livewire-slide-overs
Livewire Slide Over Panel adds stateful drawer (slide-over) components to Laravel Livewire apps, supporting multiple child components while preserving state. Inspired by wire-elements/modal, it installs via Composer and a single @livewire directive.
Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.
Frequently asked questions about Livewire Slide Overs
- How do I install and set up laravelcm/livewire-slide-overs in a Laravel 12 project?
- Run `composer require laravelcm/livewire-slide-overs`, then add `@livewire('slide-over-panel')` to your layout. Ensure your project meets the requirements: PHP 8.3+, Laravel 12, and Livewire 4.x. No additional configuration is needed for basic usage.
- Can I nest multiple slide-overs (e.g., for multi-step forms) without JavaScript conflicts?
- Yes, the package supports stacked panels natively. Each slide-over maintains its own state, and you can trigger nested panels by dispatching `openPanel` events sequentially. No custom JavaScript is required—Livewire handles the stacking automatically.
- Does this package work with Laravel 11 or older Livewire versions?
- No, this package requires PHP 8.3+, Laravel 11/12, and Livewire 3.4/4.x. If you’re on an older stack, consider alternatives like wire-elements/modal or upgrade your dependencies to use this package.
- How do I customize the width, animations, or close behavior of a slide-over?
- Use the component’s methods like `panelMaxWidth(800)` or `closePanelOnEscape(true)` in your Livewire class. For animations, override the default Tailwind classes or include custom CSS. Deep customization may require extending the package’s JS/CSS.
- Will slide-overs work with Inertia.js or Alpine.js in the same project?
- Yes, but test for conflicts. Alpine.js is required for dynamic resizing (e.g., `resizePanel()`), so ensure no version clashes. Inertia.js may need event handling adjustments if slide-overs interfere with page transitions.
- Is there a performance impact when opening multiple slide-overs concurrently?
- Stacked panels are optimized for performance, but excessive nesting may increase DOM complexity. Monitor memory usage with `memory_get_usage()` in your `mount()` method. Avoid bloating initial state by pre-specifying attributes.
- How do I handle accessibility (e.g., keyboard navigation, screen readers) for slide-overs?
- The package provides basic accessibility features like ESC-to-close, but for full compliance (e.g., ARIA roles), you may need to extend the component. Test with tools like axe DevTools or manually verify keyboard interactions.
- Can I use this package without Tailwind CSS?
- Yes, set `include_css: true` in the config to include default styles. However, you’ll need to manually safelist the package’s classes in your CSS if using a different framework. The package adds ~5KB to your payload in this case.
- What’s the best way to test slide-over functionality in a CI pipeline?
- Use Laravel’s `wire:test` or Pest to simulate panel events (e.g., `dispatch('openPanel')`). Test edge cases like rapid opens/closes, ESC key handling, and Alpine.js interactions. Mock Livewire’s reactivity if needed.
- Are there alternatives to this package for Laravel Livewire modals/drawers?
- Yes, consider wire-elements/modal (modal-only), filament/support (Filament’s UI components), or custom solutions using Alpine.js + Livewire. This package stands out for its drawer-specific optimizations and stacked panel support.
Weaver
How can I help you explore Laravel packages today?