关于 infolists
infolists 是一项为 FilamentPHP v4 生成只读信息列表的技能,适用于构建详情页和弹窗的开发者。它涵盖多种条目、布局组件及格式和可见性设置。
主要功能
- 01生成只读信息列表
- 02支持多种条目类型
- 03使用分区与网格等布局
- 04处理关联数据
- 05配置格式与条件可见性
适用场景
- 01为详情页展示记录信息
- 02在弹窗中呈现只读数据
- 03按关联关系组织评论等条目
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ mwguerra/ claude-code-plugins --skill infolists安装后在 Claude Code 中输入/infolists确认已加载。
详细介绍
FilamentPHP 信息列表生成技能
概述
此技能用于生成 FilamentPHP v4 信息列表,以便在查看页面和模态框中显示只读数据。
文档参考
重要: 生成信息列表前,请阅读:
/home/mwguerra/projects/mwguerra/claude-code-plugins/filament-specialist/skills/docs/references/infolists/
信息列表基本结构
use Filament\Infolists;
use Filament\Infolists\Infolist;
public static function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// Entries here
]);
}
条目类型
文本条目
// Basic text
Infolists\Components\TextEntry::make('name')
->label('Name');
// With formatting
Infolists\Components\TextEntry::make('price')
->money('usd');
// Date formatting
Infolists\Components\TextEntry::make('created_at')
->dateTime('F j, Y H:i');
// Relative date
Infolists\Components\TextEntry::make('updated_at')
->since();
// With limit
Infolists\Components\TextEntry::make('description')
->limit(100)
->tooltip(fn ($record) => $record->description);
// HTML content
Infolists\Components\TextEntry::make('content')
->html()
->prose();
// Markdown content
Infolists\Components\TextEntry::make('readme')
->markdown();
// Copyable
Infolists\Components\TextEntry::make('uuid')
->copyable()
->copyMessage('Copied!')
->copyMessageDuration(1500);
// With color
Infolists\Components\TextEntry::make('status')
->color(fn (string $state): string => match ($state) {
'draft' => 'gray',
'published' => 'success',
default => 'primary',
});
// With icon
Infolists\Components\TextEntry::make('email')
->icon('heroicon-o-envelope')
->iconColor('primary');
// With badge
Infolists\Components\TextEntry::make('status')
->badge()
->color(fn (string $state): string => match ($state) {
'draft' => 'warning',
'published' => 'success',
default => 'gray',
});
// List of values
Infolists\Components\TextEntry::make('tags.name')
->listWithLineBreaks()
->bulleted();
// With URL
Infolists\Components\TextEntry::make('website')
->url(fn ($record) => $record->website)
->openUrlInNewTab();
图标条目
// Boolean icon
Infolists\Components\IconEntry::make('is_active')
->boolean();
// Custom icons
Infolists\Components\IconEntry::make('status')
->icon(fn (string $state): string => match ($state) {
'draft' => 'heroicon-o-pencil',
'reviewing' => 'heroicon-o-clock',
'published' => 'heroicon-o-check-circle',
})
->color(fn (string $state): string => match ($state) {
'draft' => 'info',
'reviewing' => 'warning',
'published' => 'success',
default => 'gray',
});
图像条目
// Basic image
Infolists\Components\ImageEntry::make('avatar')
->circular()
->size(80);
// Multiple images
Infolists\Components\ImageEntry::make('images')
->stacked()
->limit(3)
->limitedRemainingText();
// Square image
Infolists\Components\ImageEntry::make('logo')
->square()
->size(100);
// With default
Infolists\Components\ImageEntry::make('photo')
->defaultImageUrl(url('/images/placeholder.png'));
颜色条目
Infolists\Components\ColorEntry::make('color')
->copyable();
键值条目
Infolists\Components\KeyValueEntry::make('metadata');
可重复条目(用于 HasMany)
Infolists\Components\RepeatableEntry::make('comments')
->schema([
Infolists\Components\TextEntry::make('author.name')
->label('Author'),
Infolists\Components\TextEntry::make('content')
->columnSpanFull(),
Infolists\Components\TextEntry::make('created_at')
->dateTime(),
])
->columns(2);
视图条目(自定义)
Infolists\Components\ViewEntry::make('custom')
->view('filament.infolists.entries.custom-entry');
布局组件
分区
Infolists\Components\Section::make('Personal Information')
->description('Basic user details')
->icon('heroicon-o-user')
->collapsible()
->schema([
Infolists\Components\TextEntry::make('name'),
Infolists\Components\TextEntry::make('email'),
Infolists\Components\TextEntry::make('phone'),
])
->columns(3);
字段集
Infolists\Components\Fieldset::make('Address')
->schema([
Infolists\Components\TextEntry::make('street'),
Infolists\Components\TextEntry::make('city'),
Infolists\Components\TextEntry::make('state'),
Infolists\Components\TextEntry::make('zip'),
])
->columns(2);
标签页
Infolists\Components\Tabs::make('Tabs')
->tabs([
Infolists\Components\Tabs\Tab::make('Overview')
->icon('heroicon-o-information-circle')
->schema([
Infolists\Components\TextEntry::make('name'),
Infolists\Components\TextEntry::make('email'),
]),
Infolists\Components\Tabs\Tab::make('Details')
->icon('heroicon-o-document-text')
->schema([
Infolists\Components\TextEntry::make('bio')
->columnSpanFull(),
]),
Infolists\Components\Tabs\Tab::make('Settings')
->icon('heroicon-o-cog')
->badge(3)
->schema([
Infolists\Components\IconEntry::make('is_active')
->boolean(),
]),
])
->columnSpanFull();
网格
Infolists\Components\Grid::make()
->schema([
Infolists\Components\TextEntry::make('name')
->columnSpan(1),
Infolists\Components\TextEntry::make('email')
->columnSpan(1),
Infolists\Components\TextEntry::make('bio')
->columnSpanFull(),
])
->columns(2);
拆分
Infolists\Components\Split::make([
Infolists\Components\Section::make('Main Content')
->schema([
Infolists\Components\TextEntry::make('title'),
Infolists\Components\TextEntry::make('content')
->html()
->prose(),
]),
Infolists\Components\Section::make('Metadata')
->schema([
Infolists\Components\TextEntry::make('created_at')
->dateTime(),
Infolists\Components\TextEntry::make('author.name'),
])
->grow(false),
]);
分组
Infolists\Components\Group::make([
Infolists\Components\TextEntry::make('first_name'),
Infolists\Components\TextEntry::make('last_name'),
])
->columns(2);
完整信息列表示例
<?php
declare(strict_types=1);
namespace App\Filament\Resources\PostResource\Pages;
use App\Filament\Resources\PostResource;
use Filament\Infolists;
use Filament\Infolists\Infolist;
use Filament\Resources\Pages\ViewRecord;
class ViewPost extends ViewRecord
{
protected static string $resource = PostResource::class;
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
Infolists\Components\Split::make([
// Main content
Infolists\Components\Group::make([
Infolists\Components\Section::make('Post Details')
->schema([
Infolists\Components\TextEntry::make('title')
->size(Infolists\Components\TextEntry\TextEntrySize::Large)
->weight(\Filament\Support\Enums\FontWeight::Bold),
Infolists\Components\TextEntry::make('slug')
->icon('heroicon-o-link')
->copyable(),
Infolists\Components\TextEntry::make('excerpt')
->columnSpanFull(),
])
->columns(2),
Infolists\Components\Section::make('Content')
->schema([
Infolists\Components\TextEntry::make('content')
->html()
->prose()
->columnSpanFull(),
]),
Infolists\Components\Section::make('Comments')
->schema([
Infolists\Components\RepeatableEntry::make('comments')
->schema([
Infolists\Components\TextEntry::make('author.name')
->label('Author')
->weight(\Filament\Support\Enums\FontWeight::Bold),
Infolists\Components\TextEntry::make('created_at')
->since()
->color('gray'),
Infolists\Components\TextEntry::make('content')
->columnSpanFull(),
])
->columns(2),
])
->collapsible(),
]),
// Sidebar
Infolists\Components\Group::make([
Infolists\Components\Section::make('Meta')
->schema([
Infolists\Components\TextEntry::make('status')
->badge()
->color(fn (string $state): string => match ($state) {
'draft' => 'warning',
'published' => 'success',
default => 'gray',
}),
Infolists\Components\TextEntry::make('author.name')
->icon('heroicon-o-user'),
Infolists\Components\TextEntry::make('category.name')
->icon('heroicon-o-folder'),
Infolists\Components\TextEntry::make('tags.name')
->badge()
->separator(','),
]),
Infolists\Components\Section::make('Image')
->schema([
Infolists\Components\ImageEntry::make('featured_image')
->hiddenLabel()
->grow(false),
]),
Infolists\Components\Section::make('Dates')
->schema([
Infolists\Components\TextEntry::make('published_at')
->dateTime()
->icon('heroicon-o-calendar'),
Infolists\Components\TextEntry::make('created_at')
->dateTime()
->icon('heroicon-o-clock'),
Infolists\Components\TextEntry::make('updated_at')
->since()
->icon('heroicon-o-arrow-path'),
]),
])
->grow(false),
])
->from('md')
->columnSpanFull(),
]);
}
protected function getHeaderActions(): array
{
return [
\Filament\Actions\EditAction::make(),
\Filament\Actions\DeleteAction::make(),
];
}
}
条目修饰符
Infolists\Components\TextEntry::make('name')
// Label
->label('Full Name')
->hiddenLabel()
// Visibility
->visible(fn ($record) => $record->is_public)
->hidden(fn ($record) => $record->is_private)
// Placeholder for empty
->placeholder('Not specified')
->default('N/A')
// Column span
->columnSpan(2)
->columnSpanFull()
// Weight and size
->weight(\Filament\Support\Enums\FontWeight::Bold)
->size(Infolists\Components\TextEntry\TextEntrySize::Large)
// Extra attributes
->extraAttributes(['class' => 'my-custom-class']);
输出
生成的信息列表包括:
- 正确选择条目类型
- 布局结构
- 关系处理
- 格式化和样式
- 条件可见性
- 分区组织
评论
支持 Markdown