Filament v3.2 发布
最后更新时间 作者: Alex Six
我们才进入 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 侧边栏中的单个条目中。
创建和使用集群非常简单,只需几个简单的步骤即可完成。
- 在面板配置文件中使用
discoverClusters()
方法告诉 Filament 在哪里可以找到您的Cluster
类 - 运行
php artisan make:filament-cluster YourClusterName
以让 Filament 设置一个新的Cluster
类 - 将
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
作为 Select
、Radio
和 CheckboxList
组件的替代品,为相同的功能提供了一种新的 UI。ToggleButtons
显示为一组 Filament 按钮,用户可以选择其中一个或多个,类似于用户从上面列出的任何替代组件中选择一个或多个结果的方式。与 Filament 的所有 UI 组件一样,ToggleButtons
在定制其外观和感觉方面有很多选择,因此应该有适合各种情况的解决方案。
试一试,让我们知道您的想法!
有关 ToggleButtons
的更多信息,请查看新的专用文档页面
分组的表格列标题
有时,包含在我们的模型和数据库表中的数据在业务逻辑中是关联的,但在实际数据模型本身中不是关联的。这通常是松散分组的情况;例如,Post
模型上的 status
和 is_featured
列都可能影响 Post
的整体“可见性”。以前,在 Filament 中没有好的方法来向用户传达这两个属性是相关的,除了将它们并排放置在表格中。但是,随着 v3.2 的发布,这一切都改变了。
现在,与开发人员添加新的列到 Filament 表格一样简单,他们也可以添加列组来将 UI 中的列绑定在一起。例如,在我们前面的示例中,status
和 is_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 版本。请告诉我们你的想法,我们很乐意听取你的意见!
直到下一次发布!
Zillow 高级软件开发工程师。 Filament 开发者关系负责人。导师。喜欢 Laravel、Filament、JS 和 Tailwind。Vim 用户。有一只可爱的柯基犬。在 https://alexandersix.com 发布文章。