开始 - 信息列表

概述

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'),
    ]);
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);
$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')`,
]
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([
            // ...
        ]),
]
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'),
    ])
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 及它们的功能。

下一步

你已完成了本指南的阅读，下一步呢？以下是一些建议：

Edit on GitHub

Still need help? Join our Discord community or open a GitHub discussion

#概述

#定义 Entry

#使用布局组件

#下一步

概述

定义 Entry

使用布局组件

下一步