README

这个 Laravel Nova 包允许您将筛选器放置在Nova卡片中，这些卡片与筛选器下拉菜单分离（forked from optimistdigital）。

特性

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

屏幕截图

安装

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

composer require workup/nova-detached-filters

使用方法

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

use Workup\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 Workup\NovaDetachedFilters\NovaDetachedFilters;
use Workup\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'),
        ]),
    ];
}

致谢

Kaspar Rosin

许可证

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

workup / nova-detached-filters

维护者

详细信息