README

使用 gridstack js 创建和管理 filament 仪表板

此包允许添加小部件并在每个用户的基础上定义仪表板页面的布局。此包使用 Laravel 模型设置 包以确保数据库中的数据持久性。

安装

您可以通过 composer 安装此包

composer require invaders-xx/filament-gridstack-dashboard

php artisan filament:assets

注意：将插件 Blade 文件添加到您的自定义主题 tailwind.config.js 以支持深色模式。

要设置自己的自定义主题，您可以访问 Filament 网站上的官方说明页面。

将插件的视图添加到您的 tailwind.config.js 文件。

content: [
    '<path-to-vendor>/invaders-xx/filament-gridstack-dashboard/resources/**/*.blade.php',
]

请访问 Laravel 模型设置 以配置您的 User 模型以使用此包。

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

php artisan vendor:publish --tag="filament-gridstack-dashboard-config"

这是发布配置文件的内容

return [
];

目前没有选项。

可选地，您可以使用以下命令发布视图

php artisan vendor:publish --tag="filament-gridstack-dashboard-views"

使用

用于配置插件的全部函数都可以接受一个闭包作为参数。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

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

您可以配置网格的列数。默认为 12。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->columns(3),
        ])
}

您可以配置网格的行数。默认为 0（无约束）。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->rows(3),
        ])
}

您可以通过点格式（字符串）配置设置路径（用于存储设置的路径），默认路径为 'dashboard.layout'

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->settingsPath('dashboard.settings'),
        ])
}

您可以选择启用/禁用浮动小部件（默认：true）。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->float(false),
        ])
}

您可以选择启用/禁用拖动小部件（默认：false）。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->disableDrag(true),
        ])
}

您可以选择启用/禁用调整小部件大小（默认：false）。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->disableResize(true),
        ])
}

您可以选择指定小部件调整大小手柄的位置。可以是 n,ne,e,se,s,sw,w,nw 或 all 的任何组合（默认：'se'）。

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->resizable('all'),
        ])
}

您可以配置 navigationIcon、navigationGroup、navigationLabel、navigationSort、canAccess 和 shouldRegisterNavigation

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;

public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->navigationIcon('heroicon-o-chart-bar')
                ->navigationGroup('Admin')
                ->shouldRegisterNavigation(false)
                ->canAccess(fn() => auth()->id()===1)
                ->navigationLabel('Dashboard')
                ->navigationSort(1),
        ])
}

您可以使用 defaultGrid() 函数配置默认网格。此函数有一个数组作为参数。此数组应具有以下格式

[
    'widget' => AccountWidget::class, // Widget class
    'x' => 0, // starting column on the grid
    'y' => 0, // row on the grid
    'w' => 12, // number of columns on the grid
]

注意，12 列网格，x 从 0 到 11

use InvadersXX\FilamentGridstackDashboard\GridstackDashboardPlugin;
use Filament\Widgets\AccountWidget;
public function panel(Panel $panel): Panel
{
    return $panel
        ->plugins([
            GridstackDashboardPlugin::make()
                ->defaultGrid([
                    [
                        'widget' => AccountWidget::class,
                        'x' => 0,
                        'y' => 0,
                        'w' => 12,
                    ],
                ]),
        ])
}

测试

composer test

变更日志

有关最近更改的更多信息，请参阅CHANGELOG

贡献

有关详细信息，请参阅 CONTRIBUTING

安全漏洞

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

鸣谢

• David Vincent
• 所有贡献者

许可证

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