README

Livewire 滑出面板

滑出面板是一个 Livewire 组件，提供支持多个子元素并保持状态的手动滑出（slide overs）。此包受到 wire-elements/modal 的启发，这是一个在 Livewire 上渲染具有状态管理的模态框的 Livewire 组件。如果您已经使用过它，那么行为是相同的，只是不再是一个 vil 模态框，而是一个可以打开的手动滑出。

安装

要开始，请通过 Composer 需求此包

composer require laravelcm/livewire-slide-overs

使用

将 Livewire 指令 @livewire('slide-over-panel') 添加到您的母版布局中。

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

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

创建滑出面板

您可以通过运行 php artisan make:livewire ShoppingCart 来创建初始 Livewire 组件。打开您的组件类，并确保它扩展了 SlideOverComponent 类

<?php

namespace App\Livewire;

use Laravelcm\LivewireSlideOvers\SlideOverComponent;

class ShoppingCart extends SlideOverComponent
{
    public function render()
    {
        return view('livewire.shopping-cart');
    }
}

打开滑出面板

要打开滑出面板，您需要分发一个事件。例如，要打开 ShoppingCart 滑出面板

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

配置

正在开发中...

测试

正在开发中...

composer test

致谢

许可证

Livewire 滑出面板是开源软件，许可协议为 MIT 许可证。

laravelcm / livewire-slide-overs

维护者

详情

README

Livewire 滑出面板

安装

使用

创建滑出面板

打开滑出面板

配置

测试

致谢

许可证