Prime 组件
简介
在 Filament Schema 中,Prime 组件是最基本的构建块,可用于将任意内容(例如文本和图像)插入到 Schema 中。顾名思义,Prime 组件不可分割,且无法简化。Filament 提供了一组内置的 Prime 组件:
你也可以创建自己的自定义组件以将自己的任意内容添加到 Schema 中。

本例中,Prime 组件用于向用户显示说明、用户可以扫描的二维码以及用户可以保存的恢复码列表:
use Filament\Actions\Action;
use Filament\Schemas\Components\Image;
use Filament\Schemas\Components\Section;
use Filament\Schemas\Components\Text;
use Filament\Schemas\Components\UnorderedList;
use Filament\Support\Enums\FontWeight;
use Filament\Support\Enums\TextSize;
$schema
->components([
Text::make('Scan this QR code with your authenticator app:')
->color('neutral'),
Image::make(
url: asset('images/qr.jpg'),
alt: 'QR code to scan with an authenticator app',
)
->imageHeight('12rem')
->alignCenter(),
Section::make()
->schema([
Text::make('Please save the following recovery codes in a safe place. They will only be shown once, but you\'ll need them if you lose access to your authenticator app:')
->weight(FontWeight::Bold)
->color('neutral'),
UnorderedList::make(fn (): array => array_map(
fn (string $recoveryCode): Text => Text::make($recoveryCode)
->copyable()
->fontFamily(FontFamily::Mono)
->size(TextSize::ExtraSmall)
->color('neutral'),
['tYRnCqNLUx-3QOLNKyDiV', 'cKok2eImKc-oWHHH4VhNe', 'C0ZstEcSSB-nrbyk2pv8z', '49EXLRQ8MI-FpWywpSDHE', 'TXjHnvkUrr-KuiVJENPmJ', 'BB574ookll-uI20yxP6oa', 'BbgScF2egu-VOfHrMtsCl', 'cO0dJYqmee-S9ubJHpRFR'],
))
->size(TextSize::ExtraSmall),
])
->compact()
->secondary(),
])
虽然可以使用信息列表的文本条目 在 Schema 渲染文本,但条目旨在渲染实体的标签-值详细信息(例如 Eloquent 模型),而不是渲染任意文本。Prime 组件更适合此目的。信息可以被当作更类似于 HTML 中的 描述列表。
Prime 组件类可以在 Filament\Schemas\Components
命名空间中找到。它们位于组件的 Schma 数组中。
文本组件
使用 Text
组件,可以将文本插入到 Schema。请将文本内容传入到 make()
方法中:
use Filament\Schemas\Components\Text;
Text::make('Modifying these permissions may give users access to sensitive information.')

要渲染原始 HTML 内容,请将 HtmlString
对象传递给 make()
方法:
use Filament\Schemas\Components\Text;
use Illuminate\Support\HtmlString;
Text::make(new HtmlString('<strong>Warning:</strong> Modifying these permissions may give users access to sensitive information.'))
NOTE
请注意,你需要确保 HTML 渲染是安全的,否则应用可能会有 XSS 攻击漏洞。

要渲染 Markdown,你可以使用 Laravel 的 str()
辅助函数将 Markdown 转换成 HTML,并将其转换成 HtmlString
对象:
use Filament\Schemas\Components\Text;
Text::make(
str('**Warning:** Modifying these permissions may give users access to sensitive information.')
->inlineMarkdown()
->toHtmlString(),
)
除了允许静态值之外,make()
方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。
Learn more about utility injection.Utility | Type | Parameter | Description |
---|---|---|---|
Component | Filament\Schemas\Components\Component | $component | The current component instance. |
Get function | Filament\Schemas\Components\Utilities\Get | $get | A function for retrieving values from the current schema data. Validation is not run on form fields. |
Livewire | Livewire\Component | $livewire | The Livewire component instance. |
Eloquent model FQN | ?string<Illuminate\Database\Eloquent\Model> | $model | The Eloquent model FQN for the current schema. |
Operation | string | $operation | The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>. |
Eloquent record | ?Illuminate\Database\Eloquent\Model | $record | The Eloquent record for the current schema. |
自定义文本颜色
你可以为文本设置颜色:
use Filament\Schemas\Components\Text;
Text::make('Information')
->color('info')
除了允许静态值之外,color()
方法也可以接受函数来动态计算其值。你可以将各种 utility 作为参数注入到函数中。
Learn more about utility injection.Utility | Type | Parameter | Description |
---|---|---|---|
Component | Filament\Schemas\Components\Component | $component | The current component instance. |
Get function | Filament\Schemas\Components\Utilities\Get | $get | A function for retrieving values from the current schema data. Validation is not run on form fields. |
Livewire | Livewire\Component | $livewire | The Livewire component instance. |
Eloquent model FQN | ?string<Illuminate\Database\Eloquent\Model> | $model | The Eloquent model FQN for the current schema. |
Operation | string | $operation | The current operation being performed by the schema. Usually <code>create</code>, <code>edit</code>, or <code>view</code>. |
Eloquent record | ?Illuminate\Database\Eloquent\Model | $record | The Eloquent record for the current schema. |

使用中性颜色
,
默认情况下,文本颜色设置为 gray
,与背景相比通常相当暗淡。你可以使用 color('neutral')
方法将其变得更暗:
use Filament\Schemas\Components\Text;
Text::make('Modifying these permissions may give users access to sensitive information.')
Text::make('Modifying these permissions may give users access to sensitive information.')
->color('neutral')

显示为徽章
默认情况下,文本非常简单,没有背景色。你可以使用 badge()
方法使其显示为“徽章”。一个很好的用例是状态,其中可能需要显示一个带有与状态匹配的颜色的徽章:
use Filament\Schemas\Components\Text;
Text::make('Warning')
->color('warning')
->badge()