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

演示

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

composer install
composer serve

致谢

Kaspar Rosin

许可证

Nova Detached Filters 是开源软件，许可协议为 MIT 许可证。

outl1ne / nova-detached-filters

维护者

详细信息