跳到主要内容
版本:3.0

开始

概述

Filament 的 infolist 包允许你渲染特定实体的只读数据列表。它同时用在其他 Filament 包(比如在后台面板中用于展示应用资源关联管理器)。了解信息列表的特性,可以让你在创建自定义 Livewire 应用及使用 Filament 其他包时极致地节省时间。

本指南将引导您了解使用 Filament 的信息列表包构建信息列表的基本知识。如果你打算在自己的 Livewire 组件中添加一个新的信息列表,你应该先添加再回来。如果你正在向应用资源或另一个 Filament 包添加信息列表,你就可以开始了!

定义 Entry

创建信息列表的第一步是,定义会在列表中展示的条目(Entry)。你可以在调用 Infolist 对象中 entries() 方法实现。该方法接收一个 Entry 对象数组。

use Filament\Infolists\Components\TextEntry;

$infolist
->schema([
TextEntry::make('title'),
TextEntry::make('slug'),
TextEntry::make('content'),
]);

每个 Entry 都是一条信息,应该显示在信息列表中。TextEntry 用于显示文本,但也有其他可用的条目类型

面板和其他 Filament 包中的信息列表通常默认有 2 列。对于自定义消息列表,你可以使用 columns() 方法达到同样的效果:

$infolist
->schema([
// ...
])
->columns(2);

这样, content 条目只占用可用宽度的一半。我们可以使用 columnSpan() 方法,使之占用全部宽度:

use Filament\Infolists\Components\TextEntry;

[
TextEntry::make('title'),
TextEntry::make('slug')
TextEntry::make('content')
->columnSpan(2), // or `columnSpan('full')`,
]

你可以在布局文档中了解更多关于列宽和跨度的更多内容。甚至可以做成响应式!

使用布局组件

信息列表允许你在 schema 数组中使用布局组件,以控制 Entry 的展示方式。Section 是一个布局组件,它允许你将标题和描述添加到一组 Entry 中。同时也允许折叠其中的 Entry,在长信息列表中节约空间。

use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;

[
TextEntry::make('title'),
TextEntry::make('slug'),
TextEntry::make('content')
->columnSpan(2)
->markdown(),
Section::make('Media')
->description('Images used in the page layout.')
->schema([
// ...
]),
]

本例中,你可以看到 Section 组件有它自己的 schema() 方法。你可以用它在内部嵌套其他 Entry 和布局组件:

use Filament\Infolists\Components\ImageEntry;
use Filament\Infolists\Components\Section;
use Filament\Infolists\Components\TextEntry;

Section::make('Media')
->description('Images used in the page layout.')
->schema([
ImageEntry::make('hero_image'),
TextEntry::make('alt_text'),
])

此 Section 现在包含一个 ImageEntry 和一个 TextEntry。你可以在相关的文档页面中了解这些 Entry 及它们的功能。

下一步

你已完成了本指南的阅读,下一步呢?以下是一些建议: