FilamentPHP is a next generation and full stack package (TALL), it’s really great and easy to use for your admin panel and CMS. Laravel backpack In 2016, when I was a SOHO, I used Backpack as my main stack to build projects for my customers. It’s really flexible and customizable if you understand the author’s design philosophy. I could add any packages and functions I wanted into these projects created with Laravel Backpack....
Global Component Configuration 之後是接續 Macros 跟 review base component 由於之前已經有針對 Macro 深入理解過，這邊就直接進入構建自定義欄位。 要把 https://iro.js.org/ 整合到自訂欄位內： 創建自訂欄位 $ php artisan make:form-field ColorPicker //創建 demo form $ php artisan make:livewire-form DemoForm 開啟 color-picker.blade.php 將 iro.js CDN 掛入並且 new instance： <script src="https://cdn.jsdelivr.net/npm/@jaames/iro@5"></script> <x-dynamic-component :component="$getFieldWrapperView()" :field="$field" > // alpine.js x-* <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }" x-init=" const colorPicker = new iro.ColorPicker($refs.picker); "> <div x-ref="picker"></div> // 配置 ref </div> </x-dynamic-component> 添加忽略 wire:ignore 防止 livewire refresh 頁面...
官網寫得有點模糊，這邊記錄一對應的流程: 根據不同的 panel 建立 theme: $ php artisan make:filament-theme $ php artisan make:filament-theme person 會生成兩個給指定 panel 用的 tailwind.config.js 和 theme.css: resources/css/filament/person/tailwind.config.js resources/css/filament/person/theme.css 以我這邊的例子來說要需要引入 tiptap 所需要用的 css 和需要注入 tailwind 的監聽檔案: tailwind.config.js import preset from '../../../../vendor/filament/filament/tailwind.config.preset' export default { presets: [preset], content: [ ... './vendor/awcodes/filament-tiptap-editor/resources/**/*.blade.php', ], } theme.css @import '/vendor/awcodes/filament-tiptap-editor/resources/css/plugin.css'; 接著 build file: $ npm run build 接下來要告訴 panel provider 呼叫對應的 vitetheme，也就是剛剛的 theme.css style: class PersonPanelProvider extends PanelProvider { public function panel(Panel $panel): Panel { return $panel ->brandName('Person') ->default() //....