Languages

Version

Theme

信息列表 - Entries

开始

概述

Entry 类位于 Filament\Infolists\Components 命名空间下。你可以将其放到 $infolist->schema() 方法内:

use Filament\Infolists\Infolist;
 
public function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}

如果你在面板构造器的资源中,infolist() 方法应该是静态的:

use Filament\Infolists\Infolist;
 
public static function infolist(Infolist $infolist): Infolist
{
return $infolist
->schema([
// ...
]);
}

条目(Entry)可以使用静态 make() 方法创建,传入其唯一名称。你可以使用"点语法"访问 Entry 关联。

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
 
TextEntry::make('author.name')
Entries in an infolist

可用条目

你也可以创建自定义条目,按照你的需要来展示数据。

设置标签

默认情况下,Entry 的标签(展示在信息列表头部),是由 Entry 的名称生成。你可以使用 label() 方法对其自定义:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->label('Post title')

可选地,你可以通过 translateLabel() 方法使用 Laravel 本地化特性自动翻译标签。

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->translateLabel() // Equivalent to `label(__('Title'))`

Entry URL

点击 Entry 时,你可以打开一个网址。

打开 URL

你可以使用 url() 方法,传入回调函数或者静态 URL,来打开 URL。回调接收 $record 作为参数,你可以用它来自定义 URL:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))

你也可以选择在新选项卡中打开 URL:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->url(fn (Post $record): string => route('posts.edit', ['post' => $record]))
->openUrlInNewTab()

设置默认值

要为状态为 null 的字段设置默认值,你可以使用 default() 方法。该方法将会将默认状态视为真实状态,因此,像图片或者颜色这些 Entry 将会显示默认图片或者颜色。

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->default('Untitled')

如果 Entry 为空添加占位符文本

有时,你想在 Entry 为空状态值式显示占位符文本,其使用青灰色文本。这与默认值不同,因为占位符永远是文本,且不会被当作真实状态。

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->placeholder('Untitled')
Entry with a placeholder for empty state

在 Entry 下添加帮助文本

有时,你希望为消息列表用户提供额外信息。为此,你可以在 Entry 下面添加帮助文本。

helperText() 方法用于添加帮助文本:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('name')
->helperText('Your full name here, including any middle names.')

该方法接收普通文本字符串,或者 Illuminate\Support\HtmlStringIlluminate\Contracts\Support\Htmlable 的实例。它允许你在帮助文本中渲染 HTML,甚至 markdown:

use Filament\Infolists\Components\TextEntry;
use Illuminate\Support\HtmlString;
 
TextEntry::make('name')
->helperText(new HtmlString('Your <strong>full name</strong> here, including any middle names.'))
 
TextEntry::make('name')
->helperText(str('Your **full name** here, including any middle names.')->inlineMarkdown()->toHtmlString())
 
TextEntry::make('name')
->helperText(view('name-helper-text'))
Entry with helper text

在标签旁添加 Hint 提示

除了在 Entry 下添加帮助文本,你也可以在 Entry 的标签旁边添加提示(hint)。这对于展示 Entry 的额外信息,比如链接到帮助页面,非常有用。

使用 hint() 方法添加提示:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('apiKey')
->label('API key')
->hint('Documentation? What documentation?!')

该方法接收普通文本字符串,或者 Illuminate\Support\HtmlStringIlluminate\Contracts\Support\Htmlable 的实例。它允许你渲染 HTML,甚至 markdown:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('apiKey')
->label('API key')
->hint(new HtmlString('<a href="/documentation">Documentation</a>'))
 
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
 
TextEntry::make('apiKey')
->label('API key')
->hint(view('api-key-hint'))
Entry with hint

修改提示的文本颜色

你也可以修改提示(Hint)的文本颜色。默认为灰色,不过你也可以改成 dangerinfoprimarysuccesswarning

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintColor('primary')
Entry with hint color

在提示旁边添加图标

提示同样可以在其旁边渲染图标

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle')
Entry with hint icon

添加 tooltip 到提示图标

此外,使用 hintIcon()tooltip 参数,你可以添加一个鼠标悬停在图标时显示的 tooltip:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('apiKey')
->label('API key')
->hint(str('[Documentation](/documentation)')->inlineMarkdown()->toHtmlString())
->hintIcon('heroicon-m-question-mark-circle', tooltip: 'Read it!')

隐藏 Entry

你可以使用 hidden()visible() 方法,条件性地隐藏 Entry:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('role')
->hidden(! auth()->user()->isAdmin())
// or
TextEntry::make('role')
->visible(auth()->user()->isAdmin())

计算状态

有时候,你需要计算 Entry 的状态,而不是直接从数据库中对它进行读取。

将回调函数传入到 state() 方法,你可以自定义该 Entry 返回的状态:

Infolists\Components\TextEntry::make('amount_including_vat')
->state(function (Model $record): float {
return $record->amount * (1 + $record->vat_rate);
})

Tooltip

你可以指定鼠标悬停时显示的 tooltip:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('title')
->tooltip('Shown at the top of the page')
Entry with tooltip

该方法也接受一个可以访问当前信息列表记录的闭包:

use Filament\Infolists\Components\TextEntry;
use Illuminate\Database\Eloquent\Model;
 
TextEntry::make('title')
->tooltip(fn (Model $record): string => "By {$record->author->name}")

自定义属性

传递数组给 extraAttributes(),可以自定义 Entry 的 HTML:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('slug')
->extraAttributes(['class' => 'bg-gray-200'])

这些属性合并到该 Entry 的外层 </div> 中。

你也可以将额外的 HTML 属性传递给该 Entry 的包装器,其包装了标签、Entry 和其他文本:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('slug')
->extraEntryWrapperAttributes(['class' => 'entry-locked'])

全局设置

如果想全局修改所有 Entry 的默认行为,可以在服务提供者 boot() 方法中调用静态的 configureUsing() 方法,其中传入一个闭包以修改 Entry 行为。比如,如果想让所有的 TextEntry 组件设置为 word(10),你可以这样:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::configureUsing(function (TextEntry $entry): void {
$entry
->words(10);
});

当然,你仍然可以在各个 Entry 中单独重写该行为:

use Filament\Infolists\Components\TextEntry;
 
TextEntry::make('name')
->words(null)
Edit on GitHub

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

上一页
开始