自定义组件

#将 Blade 视图插入到 Schema

你可以使用视图组件，将 Blade 视图插入到 Schema 中：

use Filament\Schemas\Components\View;

View::make('filament.schemas.components.chart')

此处假定你有一个 resources/views/filament/schemas/components/chart.blade.php 文件。

#渲染组件子 Schema

你可以传递 Schema 子组件到该组件的 schema() 方法中：

use Filament\Forms\Components\TextInput;
use Filament\Schemas\Components\View;

View::make('filament.schemas.components.chart')
    ->schema([
        TextInput::make('subtotal'),
        TextInput::make('total'),
    ])

在 Blade 视图中，你可以使用 $getChildSchema() 函数渲染该组件的 schema()：

<div>
    {{ $getChildSchema() }}
</div>

#在 Blade 视图中访问另一个组件的状态

在 Blade 视图中，你可以使用 $get() 函数访问 Schema 中另一个组件的状态：

<div>
    {{ $get('email') }}
</div>

#在 Blade 视图中访问 Eloquent 记录

在 Blade 视图中，你可以使用 $record 变量访问当前 Eloquent 记录：

<div>
    {{ $record->name }}
</div>

#在 Blade 视图中访问当前操作

在 Blade 视图中，你可以使用 $operation 变量访问当前操作，这些操作通常为 create、edit 或者 view：

<p>
    @if ($operation === 'create')
        This is a new post.
    @else
        This is an existing post.
    @endif
</p>

#在 Blade 视图中访问当前 Livewire 组件实例

在 Blade 视图中，你可以使用 $this 访问当前 Livewire 组件：

@php
    use Filament\Resources\Users\RelationManagers\PostsRelationManager;
@endphp

<p>
    @if ($this instanceof PostsRelationManager)
        You are editing posts the of a user.
    @endif
</p>

#在 Blade 视图中访问当前组件实例

在 Blade 视图中，你可以使用 $schemaComponent 访问当前组件实例。你可以在该对象上调用公共方法访问其他以变量形式无法获取到的信息：

<p>
    @if ($schemaComponent->getState())
        This is a new post.
    @endif
</p>

#插入 Livewire 组件到 Schema 中

你可以直接将 Livewire 组件插入到 Schema 中：

use App\Livewire\Chart;
use Filament\Schemas\Components\Livewire;

Livewire::make(Chart::class)

如果你要渲染多个相同的 Livewire 组件，请确保向每个组件传递唯一的 key()：

use App\Livewire\Chart;
use Filament\Schemas\Components\Livewire;

Livewire::make(Chart::class)
    ->key('chart-first')

Livewire::make(Chart::class)
    ->key('chart-second')

Livewire::make(Chart::class)
    ->key('chart-third')

#传递参数到 Livewire 组件中

你可以传递参数数组到 Livewire 组件中：

use App\Livewire\Chart;
use Filament\Schemas\Components\Livewire;

Livewire::make(Chart::class, ['bar' => 'baz'])

除了允许静态值职位，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 create, edit, or view.
Eloquent record	?Illuminate\Database\Eloquent\Model	$record	The Eloquent record for the current schema.

现在，这些参数将传给 Livewire 组件的 mount() 方法：

class Chart extends Component
{
    public function mount(string $bar): void
    {       
        // ...
    }
}

此外，它们将作为 Livewire 组件上的公共属性提供：

class Chart extends Component
{
    public string $bar;
}

#在 Livewire 组件中访问当前记录

你可以使用 mount() 方法中的 $record 参数或 $record 属性访问 Livewire 组件中的当前记录：

use Illuminate\Database\Eloquent\Model;

class Chart extends Component
{
    public function mount(?Model $record = null): void
    {       
        // ...
    }
    
    // or
    
    public ?Model $record = null;
}

请注意，当记录尚未创建时，它将为 null。如果你想在记录为 null 时隐藏 Livewire 组件，可以使用 hidden() 方法：

use Filament\Schemas\Components\Livewire;
use Illuminate\Database\Eloquent\Model;

Livewire::make(Chart::class)
    ->hidden(fn (?Model $record): bool => $record === null)

#懒加载 Livewire 组件

你可以使用 lazy() 方法允许组件延迟加载：

use Filament\Schemas\Components\Livewire;
use App\Livewire\Chart;

Livewire::make(Chart::class)
    ->lazy()       

#自定义组件类

你可以创建自己的自定义组件类和视图，它可以在整个项目中重复使用，甚至可以作为插件发布到社区。

要创建自定义组件类和视图，你可以使用如下命令：

php artisan make:filament-schema-component Chart

该命令将创建如下组件类：

use Filament\Schemas\Components\Component;

class Chart extends Component
{
    protected string $view = 'filament.schemas.components.chart';

    public static function make(): static
    {
        return app(static::class);
    }
}

同时生成一个视图文件：resources/views/filament/schemas/components/chart.blade.php。

你可以使用与 将 Blade 视图插入到 Schema 中 相同的 utility 来 渲染组件的子 Schema、访问另一个组件的实时状态、访问当前的 Eloquent 记录、访问当前的操作、访问当前的 Livewire 组件实例 以及 访问当前的组件实例。

#添加配置方法到自定义组件类

你可以向自定义组件类添加一个公共方法，该方法接受配置值，将其存储在 protected 属性中，然后从另一个公共方法再次返回它：

use Filament\Schemas\Components\Component;

class Chart extends Component
{
    protected string $view = 'filament.schemas.components.chart';
    
    protected ?string $heading = null;

    public static function make(): static
    {
        return app(static::class);
    }

    public function heading(?string $heading): static
    {
        $this->heading = $heading;

        return $this;
    }

    public function getHeading(): ?string
    {
        return $this->heading;
    }
}

现在，在自定义组件的 Blade 视图中，你可以使用 $getHeading() 函数访问标题:

<div>
    {{ $getHeading() }}
</div>

任何你在自定义组件类中定义的公共方法都可以在 Blade 视图中以当作变量函数以这种方式访问。

要将配置中传入到自定义组件类，你可以使用公共方法：

use App\Filament\Schemas\Components\Chart;

Chart::make()
    ->heading('Sales')

#允许将 utility 注入到自定义组件配置方法中

Utility 注入是 Filament 的一个强大功能，它允许用户使用可以访问各种 utility 的函数来配置组件。你可以通过确保配置的参数类型和属性类型允许用户传递“闭包”来实现 utility 注入。在 getter 方法中，你应该将配置值传递给 $this->evaluate() 方法，如果用户传递了 utility，该方法会将其注入到用户的函数中；如果是静态值，则返回该值：

use Closure;
use Filament\Schemas\Components\Component;

class Chart extends Component
{
    protected string $view = 'filament.schemas.components.chart';
    
    protected string | Closure | null $heading = null;

    public static function make(): static
    {
        return app(static::class);
    }

    public function heading(string | Closure | null $heading): static
    {
        $this->heading = $heading;

        return $this;
    }

    public function getHeading(): ?string
    {
        return $this->evaluate($this->heading);
    }
}

现在，你可以将静态值或函数传递给 heading() 方法，并注入任何 utility作为参数：

use App\Filament\Schemas\Components\Chart;

Chart::make()
    ->heading(fn (Product $record): string => "{$record->name} Sales")

#在自定义组件类的构造函数中接收配置值

你可以在自定义组件的 make() 构造函数方法中接受一个配置值，并将其传递给相应的 setter 方法：

use Closure;
use Filament\Schemas\Components\Component;

class Chart extends Component
{
    protected string $view = 'filament.schemas.components.chart';
    
    protected string | Closure | null $heading = null;

    public function __construct(string | Closure | null $heading = null)
    {
        $this->heading($heading)
    }

    public static function make(string | Closure | null $heading = null): static
    {
        return app(static::class, ['heading' => $heading]);
    }
    
    public function heading(string | Closure | null $heading): static
    {
        $this->heading = $heading;

        return $this;
    }

    public function getHeading(): ?string
    {
        return $this->evaluate($this->heading);
    }
}

Edit on GitHub

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