包简介

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

README 文档

README

Livewire Slide Over Panel

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).

Requirements

PHP 8.3 or higher
Laravel 11.x or 12.x
Livewire 3.4 or 4.x

Installation

To get started, require the package via Composer:

composer require laravelcm/livewire-slide-overs

Usage

Add the Livewire directive @livewire('slide-over-panel') to your template 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: '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>

Instant Open (Optimistic UI)

Dispatching openPanel waits for a full Livewire round-trip before the drawer animates. The window.$slideOver helper opens the drawer chrome immediately while the Livewire content hydrates inside it during the slide transition:

<button onclick="$slideOver.open('shopping-cart')">View cart</button>

<!-- With arguments -->
<button onclick="$slideOver.open('edit-user', { user: {{ $user->id }} })">Edit user</button>

<!-- With panel attribute overrides -->
<button onclick="$slideOver.open('shopping-cart', {}, { maxWidthClass: 'max-w-2xl' })">View cart</button>

How the cache works. No registration or config is required. The first time a given component is opened in a session, the helper falls back to a standard Livewire round-trip (the drawer can't animate without knowing its width and position). Once the server response returns, the resolved panel attributes are stored in sessionStorage, and every subsequent open of the same component during that session is instant.

If you want the very first open to be instant too, pass the relevant attributes explicitly as the third argument — they bypass the cache and let the helper animate immediately.

Passing Data

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.

Resizing a Slide Over Dynamically

A slide over's width is normally set once via panelMaxWidth() on the component class. To change the width while the panel is open (for example, expanding when the user reveals additional content), call resizePanel() from your component:

public function loadDetails(): void
{
    // ... fetch data ...

    // Expand the panel to give the new content some room.
    $this->resizePanel('max-w-6xl');
}

public function clearDetails(): void
{
    // ... reset ...

    $this->resizePanel('max-w-2xl');
}

The argument is a Tailwind max-width utility class (max-w-sm through max-w-7xl) or any arbitrary class string — including JIT values such as max-w-[800px]. The change is applied client-side via a smooth CSS transition; no full re-render of the panel is required.

To target a specific panel in a stacked configuration, pass its id as the second argument:

$this->resizePanel('max-w-4xl', $panelId);

When omitted, the currently active panel is resized.

Closing the Slide Over

From within your slide over component, you can call $this->closePanel():

public function save()
{
    // Save logic...

    $this->closePanel();
}

Force Close

If you have multiple slide overs open and want to close them all at once, use forceClose():

public function save()
{
    $this->forceClose()->closePanel();
}

Skip Previous Panels

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 with Events

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]],
]);

Component Properties

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

Configuration

You can publish the configuration file:

php artisan vendor:publish --tag=livewire-slide-over-config

Available 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,
    ],
];

TailwindCSS

The slide over uses TailwindCSS classes. If you use TailwindCSS in your project, you need to configure it to scan the package views.

Tailwind CSS v4

Add the package views using the @source directive in your CSS file:

@import "tailwindcss";
@source "../vendor/laravelcm/livewire-slide-overs/resources/views";

Tailwind CSS v3

Add the package views to your tailwind.config.js content array:

module.exports = {
    content: [
        // ...
        './vendor/laravelcm/livewire-slide-overs/resources/views/**/*.blade.php',
    ],
    // ...
}

Without TailwindCSS

If you don't use TailwindCSS, set include_css to true in your configuration file to include the precompiled styles.

Testing

composer test

Credits

License

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

laravelcm/livewire-slide-overs 适用场景与选型建议

laravelcm/livewire-slide-overs 是一款基于 JavaScript 开发的 Composer 扩展包，目前已累计 19.5k 次下载、GitHub Stars 达 2，最近一次更新时间为 2024 年 05 月 18 日，在 PHP 生态内属于活跃度较高的组件。

它主要适用于以下技术方向：「laravel」「livewire」「slide-overs」等业务场景。在实际项目中，围绕这些方向常见需要落地的问题包括：接口对接、性能调优、并发安全、与既有框架（Laravel / ThinkPHP / Yii / Webman 等）的兼容适配，以及生产环境的日志埋点与稳定性保障。

我们在过去多个企业项目中使用过 laravelcm/livewire-slide-overs 或与其功能相近的方案，如果你在选型或落地过程中遇到问题，例如 版本兼容、二次改造、私有化封装、与内部系统对接、生产 BUG 排查，欢迎联系我们协助评估。

围绕 laravelcm/livewire-slide-overs 我们能提供哪些服务？

定制开发 / 二次开发

基于 laravelcm/livewire-slide-overs 在你已有业务上做功能扩展、字段裁剪、UI 适配、与内部账号 / 权限 / 日志系统的深度对接。

BUG 修复 & 性能优化

线上偶发问题、内存泄漏、慢查询、并发异常等排查修复；针对高流量场景做缓存、队列、索引层面的调优。

项目外包 & 长期维护

承接完整的项目从需求 → 设计 → 开发 → 上线 → 长期运维；也可按月提供技术保姆服务。

yvsm@zunyunkeji.com QQ：316430983 微信：yvsm316 西安尊云信息科技 · 专注 PHP / Go / 分布式系统研发

与 laravelcm/livewire-slide-overs 相关的其它包

同方向 / 同关键字的高下载量 PHP Composer 包推荐，方便对比选型：

lunarphp/livewire-starter-kit 204

Livewire starter kit for Lunar e-commerce.

emmanuel/livewire-datatable-bs4 16

Views for the package MedicOneSystems Livewire Datatables with Bootstrap 4

wika-group/livewire-slide-over 2

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

batnieluyo/livewire-slide-over 0

Livewire component that provides drawers (slide overs) that support multiple children while maintaining state.

codespb/livewire-notifier 20

Simple Livewire notifications system without any dependencies except TALL-stack.

lee-to/laravel-phone-auth 18

Laravel+livewire phone auth module

laravelcm/livewire-slide-overs

包简介

关键字：

README 文档

README

Livewire Slide Over Panel

Requirements

Installation

Usage

Creating a Slide Over

Opening a Slide Over

Instant Open (Optimistic UI)

Passing Data

Resizing a Slide Over Dynamically

Closing the Slide Over

Force Close

Skip Previous Panels

Close with Events

Component Properties

Configuration

TailwindCSS

Tailwind CSS v4

Tailwind CSS v3

Without TailwindCSS

Testing

Credits

License

laravelcm/livewire-slide-overs 适用场景与选型建议

与 laravelcm/livewire-slide-overs 相关的其它包

统计信息

GitHub 信息

其他信息