Filament v3.2 发布

最后更新时间 作者:

Introducing Filament v3.2 image

我们才进入 1 月份 15 天,Filament v3.2 已经发布了!这个版本包含了很多令人兴奋的更新,让我们深入了解一下吧!

与往常一样,如果您希望直接在 Github 上阅读变更,请查看 v3.2 的变更日志 此处

CSV/Excel 导出操作

在 Filament v3.1 中,我们引入了使用 CSV 导入大量数据的功能。从那时起,我们最常被请求的功能之一就是添加完全相反的功能——导出!现在,在 v3.2 中,添加了一个预先构建的 ExportAction 来实现这一点。

使用与 v3.1 中添加的导入功能非常相似的 API,开发人员可以创建 Exporters,告诉 Filament 如何导出给定的数据集。

Exporter 的上下文中,开发人员可以定义应从数据中包含哪些列,如何标记它们,甚至可以调整应在每个表格单元格中显示的数据本身。此外,与 Importers 一样,Exporters 可以通过 ExportColumn 对象处理来自相关模型的数据显示。最简单的情况下,它们可以配置为显示来自相关模型的数据(编写 Post 对象的 User 的名称),但 ExportColumns 甚至可以进一步聚合关系并根据关系的存在输出数据。

这些只是皮毛,所以请务必查看 Filament 网站上的官方导出操作文档以获取更多详细信息!

集群

集群是 Filament v3.2 中最令人兴奋的添加之一!在 v3.1 中添加的子导航功能的基础上,集群是 Filament 面板中的一个层次结构,允许开发人员将资源和自定义页面分组在一起。为了给出不太抽象的定义,集群有助于快速轻松地将 Filament 面板中的多个页面分组在一起,并将它们捆绑到 Filament 侧边栏中的单个条目中。

创建和使用集群非常简单,只需几个简单的步骤即可完成。

  1. 在面板配置文件中使用 discoverClusters() 方法告诉 Filament 在哪里可以找到您的 Cluster
  2. 运行 php artisan make:filament-cluster YourClusterName 以让 Filament 设置一个新的 Cluster
  3. protected static ?string $cluster = YourClusterName::class 属性添加到您希望在给定集群中的任何资源或页面类中

完成这三个步骤后,您将在主侧边栏中看到您的集群。当单击时,Filament 将打开一个带有子导航的页面,其中包含您赋予 $cluster 属性的所有资源和页面。

这在 Filament 中构建面板时解锁了难以置信的灵活性和可定制性。有关集群及其最佳使用方式的更多详细信息,请查看文档

延迟表格过滤器

Filament 表格包最重要的功能之一是能够快速轻松地为表格数据创建过滤器。过去,每当在前端与这些过滤器之一交互时,它都会立即发出一个请求以获取新的、经过过滤的数据。在很多情况下,这完全没问题,用户不会注意到太多延迟(如果有的话)。但是,在某些情况下,与过滤器交互会导致界面出现明显的延迟,因为查询很重,数据集很大,等等。

现在,在 v3.2 中,表格过滤器现在可以延迟了!当表格的过滤器被延迟时,用户可以随意点击并切换他们想要的任何过滤器,但实际的查询只有在用户点击“应用”时才会运行。为表格启用延迟过滤器就像在 $table 对象中添加一行代码一样简单:->deferFilters()

有关延迟表格过滤器的更多信息,请查看文档

未保存的更改警报

我们都经历过这种情况。我们都完成了长而复杂的表单的 90%,然后意外地从页面导航离开,抹去了我们所有辛勤的工作。好吧,感谢 v3.2 版本的发布,这将不再是 Filament 面板的问题了!

通过将 unsavedChangesAlerts() 方法链接到 $panel 配置对象,Filament 会自动向尝试在没有保存进度更改的情况下从任何给定页面导航离开的用户发送警报。正如您所期望的,这些警报已在“创建”和“编辑”页面上启用,但也已在任何打开的操作模态窗口中启用!

有关这些警报的更多详细信息,请参阅面板配置文档的以下部分

ToggleButtons 组件

Filament v3.2 包含一个名为 ToggleButtons 的新表单组件。ToggleButtons 作为 SelectRadioCheckboxList 组件的替代品,为相同的功能提供了一种新的 UI。ToggleButtons 显示为一组 Filament 按钮,用户可以选择其中一个或多个,类似于用户从上面列出的任何替代组件中选择一个或多个结果的方式。与 Filament 的所有 UI 组件一样,ToggleButtons 在定制其外观和感觉方面有很多选择,因此应该有适合各种情况的解决方案。

试一试,让我们知道您的想法!

有关 ToggleButtons 的更多信息,请查看新的专用文档页面

分组的表格列标题

有时,包含在我们的模型和数据库表中的数据在业务逻辑中是关联的,但在实际数据模型本身中不是关联的。这通常是松散分组的情况;例如,Post 模型上的 statusis_featured 列都可能影响 Post 的整体“可见性”。以前,在 Filament 中没有好的方法来向用户传达这两个属性是相关的,除了将它们并排放置在表格中。但是,随着 v3.2 的发布,这一切都改变了。

现在,与开发人员添加新的列到 Filament 表格一样简单,他们也可以添加列组来将 UI 中的列绑定在一起。例如,在我们前面的示例中,statusis_featured 都在“可见性”的保护伞下分组。因此,我们不是仅仅将这两个列并排放置,并希望用户能够理解它们的关联性,而是可以将它们包装在 ColumnGroup 中,让 Filament 直接在表格中显示它们的关联性。

这些列的代码将从以下代码

TextColumn::make('status'),
IconColumn::make('is_featured'),

更改为以下代码

ColumnGroup::make('Visibility', [
TextColumn::make('status'),
IconColumn::make('is_featured'),
])

就是这样!

要详细了解如何分组列以及调整 ColumnGroup 对象的其他方法,请查看以下链接的文档

可显示的密码字段

这是一个看似很小的更新,但一直被反复要求,所以我们非常高兴地将可显示的密码字段引入 Filament v3.2!

它完全按照字面意思执行。现在,通过将 `revealable()` 方法链接到密码字段声明中,Filament 将在 `TextInput` 字段的末尾添加一个切换按钮,用于显示/隐藏密码字符。不再需要担心输入的遮罩点后面的字符是否是你想要输入的!只需点击并以纯文本形式显示你的 "password123" 密码!

KeyValueEntry 信息列表组件

在 v3.2 版本中,添加了一个新的信息列表组件,名为 `KeyValueEntry`。`KeyValueEntry` 组件简单地以格式良好的两列表格形式显示键值对列表。此键值对列表可以从一维 JSON 对象或 PHP 数组渲染,这使得此条目在满足多种用例方面异常灵活。

`KeyValueEntry` 组件也与 Filament 表单构建器中的现有 `KeyValueField` 非常匹配!

有关更多信息,请查看文档

Split 表单布局组件

Split 表单布局是我们添加到 v3.2 版本中的另一个备受期待的功能!到目前为止,表单布局都严格局限于使用具有 N 列的网格。然而,使用 `Split` 布局,可以灵活地构建表单!

与 `Grid` 布局不同,`Split` 允许你使用 flexbox 定义布局。这允许表单部分根据内容的需要进行伸缩,而无需担心内容如果部分不够宽而被裁剪。

到目前为止,`Split` 的一个非常常见的用例是处理侧边栏。通常,表单将有一个主部分,占据页面水平空间的大部分,并会有另一个侧边栏部分用于元数据、设置等。使用 `Split` 布局,我们可以将侧边栏部分设置为缩小,仅占用部分内容所需的空间,从而使我们的主部分占用尽可能多的可用空间!

Split 组件有很多不同的用途,所以请查看文档以了解你可以在应用程序中实施它的哪些地方!

枚举描述

这是一个简单但非常方便的生活质量变化!现在,在 v3.2 版本中,Filament 提供了一个 `HasDescription` 接口,允许枚举在 UI 中显示文本描述,通常显示在标签下方。类似于 `HasLabel` 接口,`HasDescription` 将要求开发者在给定的枚举上实现 `getDescription()` 方法,返回每个枚举情况的所需描述字符串。

有关代码示例和具体说明,请查看我们的文档

侧边栏居中 UI 调整

最后,但同样重要的是,现在,当你在 Filament 面板中使用滚动侧边栏时,在页面之间导航时,活动项目将始终尝试尽可能靠近窗口的垂直中心!希望这将进一步提升用户体验,因为你的用户将不必四处寻找当前活动的页面!

感谢!

一如既往,如果没有不可思议的 Filament 社区,我们就无法做到这一点!你们所有人对我们所做的工作都至关重要,我们非常感谢你们每个人在我们的 Discord 和 Twitter 上每天贡献、讨论和分享的意见。

我们很高兴终于为你们所有人发布了 v3.2 版本。请告诉我们你的想法,我们很乐意听取你的意见!

直到下一次发布!

Alex Six photo

Zillow 高级软件开发工程师。 Filament 开发者关系负责人。导师。喜欢 Laravel、Filament、JS 和 Tailwind。Vim 用户。有一只可爱的柯基犬。在 https://alexandersix.com 发布文章。

归档于
Cube

Laravel 新闻

加入 40,000 多名其他开发者,永不错过新的技巧、教程等。

Laravel Forge logo

Laravel Forge

轻松创建和管理你的服务器,并在几秒钟内部署你的 Laravel 应用程序。

Laravel Forge
Tinkerwell logo

Tinkerwell

Laravel 开发者的必备代码运行器。使用 AI、自动完成和本地和生产环境的即时反馈进行调试。

Tinkerwell
No Compromises logo

No Compromises

Joel 和 Aaron,来自 No Compromises 播客的两名经验丰富的开发者,现在可以为你的 Laravel 项目提供服务。 ⬧ 固定费用为每月 7500 美元。 ⬧ 没有冗长的销售流程。 ⬧ 没有合同。 ⬧ 100% 退款保证。

No Compromises
Kirschbaum logo

Kirschbaum

提供创新和稳定性,确保你的 Web 应用程序取得成功。

Kirschbaum
Shift logo

Shift

正在运行旧版本的 Laravel?即时、自动化的 Laravel 升级和代码现代化,以保持你的应用程序新鲜。

Shift
Bacancy logo

Bacancy

每月仅需 2500 美元,即可使用经验丰富的 Laravel 开发者(拥有 4-6 年的经验)为你的项目增添活力。获得 160 小时的专业知识和 15 天的无风险试用。立即安排通话!

Bacancy
Lucky Media logo

Lucky Media

立即获得 Lucky - Laravel 开发的理想选择,拥有十多年的经验!

Lucky Media
Lunar: Laravel E-Commerce logo

Lunar:Laravel 电子商务

Laravel 的电子商务。一个开源软件包,将现代无头电子商务功能的强大功能带到 Laravel。

Lunar:Laravel 电子商务
LaraJobs logo

LaraJobs

官方 Laravel 工作板

LaraJobs
SaaSykit: Laravel SaaS Starter Kit logo

SaaSykit:Laravel SaaS 启动工具包

SaaSykit 是一个 Laravel SaaS 启动工具包,它包含运行现代 SaaS 所需的所有功能。付款、漂亮的结账、管理面板、用户仪表板、身份验证、现成的组件、统计信息、博客、文档等等。

SaaSykit:Laravel SaaS 启动工具包
Rector logo

Rector

你无缝升级 Laravel、降低成本和加速创新的合作伙伴,助力企业取得成功

Rector
MongoDB logo

MongoDB

通过 MongoDB 和 Laravel 的强大集成增强你的 PHP 应用程序,使开发者能够轻松高效地构建应用程序。在使用熟悉的 Eloquent API 的同时,支持事务、搜索、分析和移动用例。探索 MongoDB 的灵活、现代数据库如何改变你的 Laravel 应用程序。

MongoDB
Maska is a Simple Zero-dependency Input Mask Library image

Maska 是一个简单的零依赖输入掩码库

阅读文章
Add Swagger UI to Your Laravel Application image

将 Swagger UI 添加到你的 Laravel 应用程序

阅读文章
Assert the Exact JSON Structure of a Response in Laravel 11.19 image

在 Laravel 11.19 中断言响应的精确 JSON 结构

阅读文章
Build SSH Apps with PHP and Laravel Prompts image

使用 PHP 和 Laravel 提示构建 SSH 应用程序

阅读文章
Building fast, fuzzy site search with Laravel and Typesense image

使用 Laravel 和 Typesense 构建快速、模糊的网站搜索

阅读文章
Add Comments to your Laravel Application with the Commenter Package image

使用 Commenter 软件包向你的 Laravel 应用程序添加评论

阅读文章