Filament v4.1 来了！Filament 国内微信群还有几十个坑位

AI摘要

Filament v4.1 发布，包含156个错误修复和39项新功能。主要更新包括：无顶部栏面板布局、富编辑器网格工具与文本颜色选择、紧凑表格重复器样式、重复条目表格布局、空状态模式组件。插件生态已扩展至224个插件。感谢社区贡献者推动版本迭代。

我们非常激动地宣布发布 Filament v4.1！

自从 v4.0 发布以来，核心团队和社区一直在努力工作：

已合并 156 个 bug 修复
新增了39个全新功能

这需要大量代码的审查、测试和合并，如果没有整个社区惊人的努力，这一切都不可能实现。💛

特别感谢：

Adam Weston 帮助将丰富的编辑器改进从他的优秀 v3 TipTap 插件移植过来。
@People-Sea 调查了来自社区的错误报告，并提供了大量的修复。

# 我们最喜欢的 v4.1 新功能

这是我们最兴奋的几个亮点。

# 新面板布局（无顶部栏）

我们引入了一个*无顶部栏的面板布局选项 *。这对于希望最大化垂直空间的应用程序来说非常完美。用户菜单、通知按钮和全局搜索可以移动到侧边栏，这为一些有趣的定制主题可能性打开了大门。

我们迫不及待想看看你们用它构建出什么！

No Topbar Layout Screenshot

要启用此布局，在面板配置中将 false 传递给 topbar() 方法：

use Filament\Panel;

public function panel(Panel $panel): Panel
{
    return $panel
        // ...
        ->topbar(false);
}

特别感谢 Nolan Nordlund 为此功能付出的时间！

# 丰富的编辑器网格工具

现在您可以将 *响应式网格 *插入富编辑器内容中，最大宽度可达 12 列。

这包括非对称分割（例如一个两列网格，其中一列占据 1/3 的空间）。非常适合在内容中创建更高级的布局。

Rich Editor Grids Screenshot

要启用此功能，将 grid 工具添加到您的富编辑器 toolbarButtons() 中：

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['grid', 'attachFiles'], // The grid tool can be added anywhere in the toolbar
    ])

# 富编辑器文本颜色工具

富编辑器现在支持 *文本颜色选择 *。您可以从默认的 Tailwind 颜色调色板中选择，也可以选择您自己的自定义颜色。您还可以为用户提供一个自定义颜色调色板供选择。

从调色板中选择时，系统会自动处理用户的光/暗模式可访问性。

Rich Editor Text Color Screenshot

要启用此功能，将 textColor 工具添加到您的富编辑器 toolbarButtons() 中：

use Filament\Forms\Components\RichEditor;

RichEditor::make('content')
    ->toolbarButtons([
        ['bold', 'italic', 'link', 'h2', 'h3'],
        ['textColor', 'attachFiles'], // The text color tool can be added anywhere in the toolbar
    ])

您还可以使用 textColors() 方法自定义可用的调色板：

use Filament\Forms\Components\RichEditor;
use Filament\Forms\Components\RichEditor\TextColor;

RichEditor::make('content')
    ->textColors([
        '#0ea5e9' => 'Brand',
        'warning' => TextColor::make('Warning', '#f59e0b', darkColor: '#fbbf24'),
    ])

文档 →

# 紧凑表格重复器样式

v4 中引入的表格重复器使得每个表单字段可以在自己的表格单元中渲染，每个重复器项成为一行。在 v4.1 中，某些字段（如 Select 和 TextInput）现在可以拥有*紧凑设计 *，使它们在单元格中看起来无缝衔接。

Compact Table Repeater Screenshot

要启用此功能，只需在重复器上设置 compact() 方法：

use Filament\Forms\Components\Repeater;

Repeater::make('members')
    ->table([
        // ...
    ])
    ->compact()
    ->schema([
        // ...
    ])

文档 →

# 重复条目的新表格布局

类似于表格重复器，但适用于信息列表条目 **。每个条目都渲染在一个单元格中，允许您在架构中输出静态表格，包含文本、图标、图片等 **。

Repeatable Entry Table Layout Screenshot

要启用此功能，请在您的 RepeatableEntry 组件上使用 table() 方法：

use Filament\Infolists\Components\IconEntry;
use Filament\Infolists\Components\RepeatableEntry;
use Filament\Infolists\Components\RepeatableEntry\TableColumn;
use Filament\Infolists\Components\TextEntry;

RepeatableEntry::make('comments')
    ->table([
        TableColumn::make('Author'),
        TableColumn::make('Title'),
        TableColumn::make('Published'),
    ])
    ->schema([
        TextEntry::make('author.name'),
        TextEntry::make('title'),
        IconEntry::make('is_published')
            ->boolean(),
    ])

文档 →

# 空状态模式组件

一个全新的模式组件，用于在您的应用中*任意位置插入空状态 *。每个空状态可以包含标题、描述、图标和页脚操作。当没有内容可显示时，使用此组件来引导用户采取行动。

Empty State Schema Screenshot

要将此组件插入您的模式中，请使用 EmptyState 类：

use Filament\Actions\Action;
use Filament\Schemas\Components\EmptyState;
use Filament\Support\Icons\Heroicon;

EmptyState::make('No users yet')
    ->description('Get started by creating a new user.')
    ->icon(Heroicon::OutlinedUser)
    ->footer([
        Action::make('createUser')
            ->icon(Heroicon::Plus),
    ])