公告: Filament 4.x 已正式发布。中文文档翻译正在进行中...
DOCS
DOCS

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\HtmlString 或 Illuminate\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\HtmlString 或 Illuminate\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)的文本颜色。默认为灰色，不过你也可以改成 danger、info、primary、success 及 warning：

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

上一页
开始
下一页
Text entry