README

此 Laravel Nova 扩展包允许您将筛选器放置在 Nova 卡片中，这些卡片与筛选器下拉菜单分离。

功能

• 保存筛选器状态
• 重置所有和单个筛选器
• 可定制
  • 更改单个筛选器的宽度
  • 为堆叠筛选器创建列

截图

安装

通过 Composer 在 Laravel Nova 项目中安装此包

composer require outl1ne/nova-detached-filters

用法

将要从筛选器菜单中分离并显示在卡片上的筛选器传递给 NovaDetachedFilters 类。

use Outl1ne\NovaDetachedFilters\NovaDetachedFilters;

public function filters()
{
    return $this->myFilters();
}

public function cards()
{
    return [
        new NovaDetachedFilters($this->myFilters()),
    ];
}

protected function myFilters()
{
    return [
        new BooleanFilter(),
        new SelectFilter(),
        new PillFilter(),
        // ...
    ];
}

HasDetachedFilters

如果您只想在 DetachedFilters 卡片上显示一些筛选器，则必须使用 HasDetachedFilters 特性。

use Outl1ne\NovaDetachedFilters\NovaDetachedFilters;
use \Outl1ne\NovaDetachedFilters\HasDetachedFilters;

class ExampleResource extends Resource
{
    use HasDetachedFilters; // Needs to have this trait

    public function cards()
    {
        return [
            new NovaDetachedFilters([
                new SelectFilter, // Showed only on card
                new SelectFilter2, // Showed both in dropdown menu and on card
            ]),
        ];
    }

    public function filters()
    {
        return [
            new SelectFilter2, // Showed both in dropdown menu and on card
            new SelectFilter3 // Shown only in dropdown menu
        ];
    }
}

定制

宽度

您可以使用 withMeta() 定义筛选器的宽度。要查看可用的宽度选项，请参阅 Tailwind 宽度类

public function cards(Request $request)
{
    return [
        new NovaDetachedFilters([
            (new SelectFilter())->withMeta(['width' => 'w-1/3']),
            (new AnotherSelectFilter())->withMeta(['width' => 'w-2/3']),
        ]),
    ];
}

如果您希望有多个筛选器卡片并排显示，请定义卡片的宽度。宽度类应不带前缀 w-。

public function cards(Request $request)
{
    return [
        (new NovaDetachedFilters([
            new SelectFilter(),
            new AnotherSelectFilter()
        ]))->width('1/3'),
        (new NovaDetachedFilters([
            new SelectFilter(),
            new AnotherSelectFilter()
        ]))->width('2/3'),
    ];
}

重置筛选器值

如果您有较大的筛选器，手动清除需要较长时间，您可以在筛选器元数据中定义 withReset，这将渲染一个按钮，轻松清除筛选器的值，而不会影响其他筛选器。

public function cards(Request $request)
{
    return [
        new NovaDetachedFilters([
            (new SelectFilter())->withMeta(['withReset' => true]),
        ]),
    ];
}

如果您想清除所有筛选器，可以在 NovaDetachedFilters 类上调用 withReset()。这将渲染一个按钮，位于左上角，可清除所有筛选器的值。

public function cards(Request $request)
{
    return [
        (new NovaDetachedFilters([
            new SelectFilter(),
        ]))->withReset(),
    ];
}

存储筛选器状态

当您正在处理多个资源和大量筛选器时，每次导航都分配它们会很麻烦。您可以在 NovaDetachedFilters 上调用 persistFilters() 函数，这将渲染一个按钮，位于卡片的右上角。点击按钮后，锁将变为绿色，表示当前筛选器已保存到 localStorage。

public function cards(Request $request)
{
    return [
        (new NovaDetachedFilters([
            new SelectFilter(),
        ]))->persistFilters(),
    ];
}

折叠卡片

如果您想允许折叠筛选器卡片，可以在 NovaDetachedFilters 上调用 withToggle()。默认情况下，这是 false。

public function cards(Request $request)
{
    return [
        (new NovaDetachedFilters([
            new SelectFilter(),
        ]))->withToggle(),
    ];
}

列

当处理大型布尔筛选器或高度相当于多个常规筛选器的药丸筛选器时，您可以将筛选器包装在 DetachedFiltersColumn 中，以轻松地将它们包装在列中。

DetachedFilterColumn 类接受两个参数 $filters 和 $width。如果未传递，列的宽度将默认为 w-auto。

有关此内容的示例，请参阅 截图部分

public function cards(Request $request)
{
    return [
        new NovaDetachedFilters([
            new BooleanFilter(),
            new DetachedFilterColumn([
                new SelectFilter(),
                new SelectFilter(),
                new SelectFilter(),
                new SelectFilter()
            ], 'w-2/3'),
        ]),
    ];
}

演示

您可以通过在工作台运行以下命令在本地机器上预览应用程序。这假设您已在其 pc 上安装了所需的软件。

composer install
composer serve

鸣谢

• Kaspar Rosin

许可证

Nova Detached Filters 是开源软件，根据 MIT 许可证 发布。