README

一个允许同时（虚拟地）重叠（无限）滑过，并具有可配置宽度的包。
此包基于aristridely/slideover（感谢[Aristotele Tufano] (https://github.com/ariStridely))，它是wire-elements/modal的分支（感谢Philo Hermans）。

安装

要开始使用，请通过Composer要求此包

composer require cloudmeshdev/livewire-slideover

Livewire 指令

将Livewire指令 @livewire('livewire-ui-slideover') 添加到您的模板中。

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

    @livewire('livewire-ui-slideover')
</body>
</html>

Alpine

Alpine 已经与Livewire v3结合使用

TailwindCSS

基本滑过模板是用TailwindCSS制作的。如果您使用不同的CSS框架，我建议您发布滑过模板，并将标记更改以包含您的CSS框架所需的类。

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

创建滑过

您可以使用 php artisan make:livewire EditUserSlideover 运行来创建初始Livewire组件。打开您的组件类，并确保它扩展了SlideoverComponent类

<?php

namespace App\Http\Livewire;

use LivewireUI\Slideover\SlideoverComponent;

class EditUserSlideover extends SlideoverComponent
{
    public function render()
    {
        return view('livewire.edit-user-slideover');
    }
}

打开滑过

要打开滑过，您需要分发一个事件。例如，要打开EditUserSlideover滑过

<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch('openSlideover', {component: 'edit-user-slideover'})">Edit User</button>

<!-- Inside existing Livewire component -->
<button wire:click="$dispatch('openSlideover', {component: 'edit-user-slideover'})">Edit User</button>

<!-- Taking namespace into account for component Admin/EditUser -->
<button wire:click="$dispatch('openSlideover', {component: 'admin.edit-user-slideover'})">Edit User</button>

传递参数

要为特定用户打开EditUserSlideover滑过，我们可以传递用户ID（注意单引号）

<!-- Outside of any Livewire component -->
<button onclick="Livewire.dispatch(
    'openSlideover', { 
        component: 'edit-user-slideover', 
        arguments: { 
            user: {{ $user->id }}
        },
        slideoverAttributes: {
            closeOnClickAway: false
        }
    })"
>Edit User</button>

<!-- Inside existing Livewire component -->
<button wire:click="$dispatch(
    'openSlideover', { 
        component: 'edit-user-slideover', 
        arguments: { 
            user: {{ $user->id }}
        }
    })"
>Edit User</button>

<!-- If you use a different primaryKey (e.g. email), adjust accordingly -->
<button wire:click="$dispatch(
    'openSlideover', { 
        component: 'edit-user-slideover', 
        arguments: { 
            user: {{ $user->email }}
        }
    })"
>Edit User</button>

<!-- Example of passing multiple parameters -->
<button wire:click="$dispatch(
    'openSlideover', { 
        component: 'edit-user-slideover', 
        arguments: { 
            user: {{ $user->email }},
            isAdmin: {{ $isAdmin }}
        }
    })"
>Edit User</button>

参数传递到滑过组件上的mount方法

<?php

namespace App\Http\Livewire;

use App\Models\User;
use LivewireUI\Slideover\SlideoverComponent;

class EditUserSlideover extends SlideoverComponent
{
    public User $user;

    public function mount(User $user)
    {
        Gate::authorize('update', $user);

        $this->user = $user;
    }

    public function render()
    {
        return view('livewire.edit-user-slideover');
    }
}

重叠滑过

从现有的滑过中，您可以使用相同的事件，另一个滑过将堆叠到第一个上面

<!-- Edit User Slideover -->

<!-- Edit Form -->

<button wire:click="$dispatch(
    'openSlideover', { 
        component: 'delete-user-slideover', 
        arguments: { 
            user: {{ $user->id }}
        }
    })"
>Delete User</button>

关闭滑过

当您完成当前滑过时，可以通过分发closeSlideover事件来关闭它。这将始终关闭最最近的前台滑过。
(注意：目前，每次您关闭滑过时，相关组件的状态都将被销毁)。

<button wire:click="$dispatch('closeSlideover')">Close</button>

您还可以从您的滑过组件类内部关闭滑过

<?php

namespace App\Http\Livewire;

use App\Models\User;
use LivewireUI\Slideover\SlideoverComponent;

class EditUserSlideover extends SlideoverComponent
{
    public User $user;

    public function mount(User $user)
    {
        Gate::authorize('update', $user);

        $this->user = $user;
    }

    public function update()
    {
        Gate::authorize('update', $user);

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

        $this->closeSlideover();
    }

    public function render()
    {
        return view('livewire.edit-user-slideover');
    }
}

配置滑过宽度

您可以通过两种方式更改滑过的宽度。
(注意：目前滑过的宽度可以通过CSS类进行配置，在这种情况下是一个TailwindCSS类)。

静态方式

在您的类中声明此方法。
当您知道滑过将始终具有相同的宽度时很有用。

public static function slideoverWidth(): string
{
    return 'w-11/12';
}

动态方式

当滑过在另一个滑过之上打开时，并且您想要让背景滑过可见，同时调整前景新滑过的宽度时，此方法很有用。

{{-- Blade View --}}
@php
    $slideoverData = json_encode(['user' => $user->id]);
    $slideoverAttributes = json_encode(['width' => 'w-8/12']);
@endphp

<button wire:click="$dispatch(
    'openSlideover', { 
        component: 'delete-user-slideover', 
        arguments: {{ $slideoverData }},
        slideoverAttributes: {{ $slideoverAttributes }}
    })"
>Delete User</button>

与aristridely/slideover的不同之处

重新启用使用escape键关闭滑过
重新启用通过点击外部关闭滑过（点击远离关闭）

与wire-elements/modal结合使用

此包可以与wire-elements/modal一起使用。推荐的方法是在modal包之前声明它，如下所示

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

    @livewire('livewire-ui-slideover')
    @livewire('livewire-ui-modal')
</body>
</html>

这将确保modal元素始终位于slideover元素之上。

注意：按escape键和点击远离关闭将冲突。
例如，如果一个modal在slideover之上打开，按escape键将关闭两者。

配置

您可以通过livewire-ui-slideover.php配置文件（部分）自定义Slideover。
（实际上只有默认宽度类）。

要发布配置，请运行vendor:publish命令

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

cloudmeshdev / livewire-slideover

维护者

详细信息