公告: 旧版文档请移步 -> http://v2.laravel-filament.cn/docs

Languages

Version

Theme

后台面板 - 仪表盘

开始

Filament 让你可以通过插件卡片,简单地创建动态自定义面板。

Widget 是纯 Livewire 组件,因此可以使用 Livewire 包的所有功能。

Widgets 也能用在资源页或者自定义页面中使用。

可用插件

Filament 附带有一些预制插件,同时也能创建自定义插件

  • 统计插件可以在卡片内显示任何数据,通常为数值型数据。
  • 图表插件在一个可视化图标中显示数值型数据。
  • 表格插件在表格中渲染数据,支持排序、搜索、过滤、操作及其他表格构造器中的功能。

你也可以创建自定义插件

插件排序

每一个插件类都有一个 $sort 属性,可用于改变该插件在页面中相对于其他插件的排序:

protected static ?int $sort = 2;

自定义插件宽度

你可以使用 $columnSpan 属性自定义插件的宽度。你可以设置为 1 到 12 之间的数字,表明插件占用多少列宽,或者使用 full 占用全部宽度:

protected int | string | array $columnSpan = 'full';

响应式插件宽度

你可能希望根据浏览器的响应式临界点,修改插件宽度。可以使用包含各个临界点对应数字的数组实现:

protected int | string | array $columnSpan = [
'md' => 2,
'xl' => 3,
];

当使用响应式插件网格时,尤其有用。

自定义插件网格

你可以修改有多少网格数被用于展示插件。

首先,你必须替换原来的 Dashboard 页面

然后,在新建的 app/Filament/Pages/Dashboard.php 文件中,你可以重写 getColumns() 方法,来返回占用的网格列数:

protected function getColumns(): int | array
{
return 3;
}

响应式插件网格

你可能希望根据浏览器的响应式临界点,调整插件占用的网格数。返回一个类似如下数组,包含各个临界点对应的列数:

protected function getColumns(): int | array
{
return [
'md' => 4,
'xl' => 5,
];
}

可以和响应式插件宽度配合使用。

条件性隐藏插件

你可以重写插件的静态 canView() 方法,条件性地对其进行隐藏:

public static function canView(): bool
{
return auth()->user()->isAdmin();
}

禁用默认插件

默认情况下,控制面板上有两个插件。这些插件可以通过更新配置文件widgets.register 属性禁用:

'widgets' => [
// ...
'register' => [],
],

自定义插件

创建一个名为 BlogPostsOverview 的 widget:

php artisan make:filament-widget BlogPostsOverview

该命令会创建两个文件 - 一个插件类文件位于 Filament 目录下的 /Widgets 文件夹中,以及一个位于 Filament 视图目录 /widgets 文件夹中的视图文件。

自定义 Dashboard 页面

如果你想要自定义 Dashboard 类,比如修改插件宽度,请新建文件 app/Filament/Pages/Dashboard.php

<?php
namespace App\Filament\Pages;
 
use Filament\Pages\Dashboard as BasePage;
 
class Dashboard extends BasePage
{
// ...
}

最后,在配置文件中移除原本的 Dashboard 类:

'pages' => [
// ...
'register' => [],
],
Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

上一页
Widgets
下一页
Stats