开始
概述
Filament 的 infolist 包允许你渲染特定实体的只读数据列表。它同时用在其他 Filament 包(比如在后台面板中用于展示应用资源及关联管理器)。了解信息列表的特性,可以让你在创建自定义 Livewire 应用及使用 Filament 其他包时极致地节省时间。
本指南将引导您了解使用 Filament 的信息列表包构建信息列表的基本知识。如果你打算在自己的 Livewire 组件中添加一个新的信息列表,你应该先添加再回来。如果你正在向应用资源或另一个 Filament 包添加信息列表,你就可以开始了!
定义 Entry
创建信息列表的第一步是,定义会在列表中展示的条目(Entry)。你可以调用 Infolist
对象中 schema()
方法实现。该方法接收一个 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 及它们的功能。
下一步
你已完成了本指南的阅读,下一步呢?以下是一些建议: