ARTICLE DETAIL

资讯详情

深耕网站建设与运营推广的一线实战洞察。

Filament Schema 自定义组件完全指南:从 Blade 视图嵌入到可复用组件类

Filament Schema 自定义组件完全指南:从 Blade 视图嵌入到可复用组件类 Filament Schema 自定义组件完全指南从 Blade 视图嵌入到可复用组件类【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filamentFilament 的 Schema 是服务端驱动 UI 的基石允许你用 PHP 配置对象声明式地构建界面。本指南聚焦packages/schemas/docs/09-custom-components.md的核心主题如何在 Schema 中嵌入任意 Blade 视图、插入 Livewire 组件以及创建可复用、可配置、可与前端 JavaScript 交互的自定义组件类。读完本篇你将掌握三种自定义扩展路径的完整实战方案并理解其底层渲染机制与安全边界。一、将 Blade 视图嵌入 SchemaFilament 提供Filament\Schemas\Components\View组件可以将任意 Blade 视图嵌入 Schema 的任意位置。源码实现非常简洁本质是一个仅接收视图名的组件use Filament\Schemas\Components\View; View::make(filament.schemas.components.chart)这要求你的项目存在resources/views/filament/schemas/components/chart.blade.php文件。从 View.php 源码 可以看到make()通过容器实例化组件并调用configure()$view参数在构造函数中直接绑定到组件上。通过 viewData() 传递数据你可以通过viewData()方法向视图传递任意数据use Filament\Schemas\Components\View; View::make(filament.schemas.components.chart) -viewData([data $data])从源码看viewData()定义在 ViewComponent 基类中支持累加多次调用getViewData()会将每次传入的数组支持闭包合并后注入视图。测试用例 ViewTest.php 验证了静态数组和闭包两种形式的合并行为。渲染组件的子 Schema你可以通过schema()方法向 View 组件传入子组件数组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()函数渲染子 Schemadiv {{ $getChildSchema() }} /div底层实现中schema()与childComponents()定义在 HasChildComponents trait子组件会被包装为独立的 Schema 对象并与父组件建立关联getChildSchema()返回该 Schema 供视图渲染。因此 View 组件天然支持无限层级的嵌套。在 Blade 视图中访问其他组件的状态在 Blade 视图中通过$get()函数可以读取 Schema 中其他组件的当前状态div {{ $get(email) }} /div注意响应式限制除非表单字段被标记为live()响应式否则该 Blade 视图不会在字段值变化时立即刷新只会在下一次触发服务端请求的用户交互时更新。若你需要对字段值变化做出即时反应务必给字段加上live()。在 Blade 视图中访问 Eloquent 记录使用$record变量访问当前 Eloquent 记录div {{ $record-name }} /div在 Blade 视图中访问当前操作使用$operation变量获取当前操作通常是create、edit或viewp if ($operation create) This is a new post. else This is an existing post. endif /p在 Blade 视图中访问当前 Livewire 组件实例使用$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 视图中访问当前组件实例使用$schemaComponent变量访问当前组件实例可以调用其公开方法获取变量之外的信息p if ($schemaComponent-getState()) This is a new post. endif /p /DSMLparameter /DSMLinvoke /DSMLtool_calls【免费下载链接】filamentA powerful open-source UI framework for Laravel • Build and ship apps admin panels fast with Livewire项目地址: https://gitcode.com/GitHub_Trending/fi/filament创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表