Prime 组件 - Schema

简介

在 Filament Schema 中，Prime 组件是最基本的构建块，可用于将任意内容（例如文本和图像）插入到 Schema 中。顾名思义，Prime 组件不可分割，且无法简化。Filament 提供了一组内置的 Prime 组件：

Text
Icon
Image
无序列表

你也可以创建自己的自定义组件以将自己的任意内容添加到 Schema 中。

An example of using prime components to set up two-factor authentication.

本例中，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 作为参数注入到函数中。

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 `create`, `edit`, or `view`.
Eloquent record	`?Illuminate\Database\Eloquent\Model`	`$record`	The Eloquent record for the current schema.

#简介

#文本组件

#自定义文本颜色

#使用中性颜色

#显示为徽章

#添加图标到徽章中

#自定义文本大小

#自定义字体粗细

#自定义字体系列

#添加 Tooltip 到文本组件

#使用 JavaScript 确定文本内容

#图标组件

#自定义图标颜色

#添加 Tooltip 到图标组件中

#图像组件

#自定义图像大小

#对齐图像

#添加 Tooltip 到图像组件中

#无序列表组件

#自定义列表项大小

#添加其他 HTML 属性到 prime 组件

简介

文本组件

自定义文本颜色

使用中性颜色

显示为徽章

添加图标到徽章中

自定义文本大小

自定义字体粗细

自定义字体系列

添加 Tooltip 到文本组件

使用 JavaScript 确定文本内容

图标组件

自定义图标颜色

添加 Tooltip 到图标组件中

图像组件

自定义图像大小

对齐图像

添加 Tooltip 到图像组件中

无序列表组件

自定义列表项大小

添加其他 HTML 属性到 prime 组件