README

此插件为 Filament 添加了全局模态，并将其从 Wire Elements Modal 移植过来。

如果您喜欢这个插件，请为原始仓库点星。

安装

您可以通过 composer 安装此包

composer require awcodes/pounce

重要

如果您尚未设置自定义主题并且正在使用 Filament Panels，请首先遵循 Filament 文档中的说明创建自定义主题。

设置好您的主题后，将插件的视图添加到您的 tailwind.config.js 文件中，然后运行 npm run dev 或 npm run build 以将插件样式添加到您的主题中。

content: [
    ...
    './vendor/awcodes/pounce/resources/**/*.blade.php',
]

对于面板

如果您正在使用 Filament Panels，您需要将插件添加到您希望使用该插件的面板中。这将向面板布局添加必要的 livewire 组件。

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            PouncePlugin::make(),
        ]);
}

独立使用

如果您正在使用独立的 Filament 包，您需要手动将插件添加到您打算使用的任何布局中。这应该在关闭 body 标签之前，并且每个页面只能有一个实例。

@livewire('pounce')

您可以使用以下命令发布配置文件

php artisan vendor:publish --tag="pounce-config"

可选（不推荐），您可以使用以下命令发布视图

php artisan vendor:publish --tag="pounce-views"

这是发布配置文件的内容

return [
    'modal_max_width' => \Awcodes\Pounce\Enums\MaxWidth::Medium,
    'modal_alignment' => \Awcodes\Pounce\Enums\Alignment::MiddleCenter,
    'modal_slide_over' => \Awcodes\Pounce\Enums\SlideDirection::None,
    'close_modal_on_click_away' => true,
    'close_modal_on_escape' => true,
    'close_modal_on_escape_is_forceful' => true,
    'dispatch_close_event' => false,
    'destroy_on_close' => false,
];

用法

创建模态

通过命令行

为了方便起见，该插件提供了一种脚手架命令来创建新的模态。这将创建一个在 App\Livewire 或您配置的 Livewire 目录中的类文件。它还会在 resources/views/livewire 中创建一个视图。

使用 --form 标志将为使用 Filament 的表单方法的模态提供一些默认值。

php artisan make:pounce {name?} {--form} {--F|force}

手动

要手动创建模态，您只需运行 Livewire make 命令并扩展 PounceComponent 类。

php artisan make:livewire CustomModal

namespace App\Http\Livewire;

use Awcodes\Pounce\PounceComponent;

class CustomModal extends PounceComponent
{
    public function render()
    {
        return view('livewire.custom-modal');
    }
}

打开和关闭模态

注意

Pounce 使用与 Wire Elements Modal 相同的约定和用法，唯一需要注意的事项是打开模态时 Pounce 使用 pounce 事件，关闭模态时使用 unPounce 事件。

有关完整的使用说明，请参阅 GitHub 上的 Wire Elements Modal。

模态对齐

模态可以与屏幕的顶部、中间或底部对齐，以及与屏幕的开始、中间或结束对齐。默认对齐方式是 MiddleCenter。有关所有可用选项，请参阅对齐枚举。这也可以在配置文件中全局设置。

use Awcodes\Pounce\Enums\Alignment;

public static function getAlignment(): Alignment
{
    return Alignment::MiddleCenter;
}

模态宽度

可以使用 Filament 的 MaxWidth 枚举中找到的枚举情况来设置模态宽度。有关所有可用选项，请参阅 MaxWidth 枚举。这也可以在配置文件中全局设置。

use Awcodes\Pounce\Enums\MaxWidth;

public static function getMaxWidth(): MaxWidth
{
    return MaxWidth::Medium;
}

滑动覆盖

默认情况下，所有模态框都是标准弹出模态框。如果您想使用滑动覆盖模态框，可以将 getSlideDirection 方法设置为 SlideDirection 枚举中的一个值。有关所有可用选项，请参阅 SlideDirection 枚举。这也可以在配置文件中全局设置。

use Awcodes\Pounce\Enums\SlideDirection;

public static function getSlideDirection(): SlideDirection
{
    return SlideDirection::Left;
}

要打开具有滑动功能的普通模态框，您需要显式地将 isSlideOver 方法返回值设置为 false。

public static function isSlideOver(): bool
{
    return false;
}

Blade 视图

虽然您可以自由使用任何您想要的 blade 视图，但该插件提供了一些预制的视图，以便您快速开始。这些视图具有预定义的内边距和外边距，以匹配 Filament 的 UI。

<div>
    <x-pounce::header>
        {{-- Modal Header --}}
    </x-pounce::header>

    <x-pounce::close-button icon-color="white" /> // defaults to 'gray'
    
    <x-pounce::heading>
        {{-- Modal Heading --}}
    </x-pounce::heading>
    
    <x-pounce::description>
        {{-- Modal Description --}}
    </x-pounce::description>

    <x-pounce::content>
        {{-- Modal Content --}}
    </x-pounce::content>

    <x-pounce::footer align="start"> // accepts start, center, end
        {{-- Modal Footer --}}
    </x-pounce::footer>
</div>

测试

composer test

变更日志

有关最近更改的更多信息，请参阅变更日志。

贡献

有关详细信息，请参阅贡献指南。

安全漏洞

有关如何报告安全漏洞的详细信息，请参阅我们的安全策略。

致谢

许可证

MIT 许可证 (MIT)。有关更多信息，请参阅许可证文件。

awcodes / pounce

维护者

详细信息