Filament

laracast 這篇添加可以加入 max length 的方法跟全局組件設定。 Max Length 這個設計跟原先添加設計方法大致相同： //TextInput protected int | \Closure | null $maxLength = null; public function maxLength(int | \Closure | null $length): self { $this->maxLength = $length; return $this; } public function getMaxLength(): ?int { return $this->evaluate($this->maxLength); } //text-input.blade <input type="text" maxlength="{{ $getMaxLength() }}" wire:model.live="{{ $getName() }}"/> 組件 TestForm 新增兩個來進行驗證： $nameInput = TextInput::make('name') ->maxLength(10) ->livewire($this); $emailInput = TextInput::make('email') ->maxLength(20) ->livewire($this); return view('livewire.test-form', [ 'nameInput' => $nameInput, 'emailInput' => $emailInput, ]); <div> {{ $nameInput }} {{ $emailInput }} </div> 添加 global configuration 將全局設定傳入closure 依序添加至元件內：...

接著上篇，Laracasts，這邊將會展示 livewire 自定義組件和傳遞參數。 生成 livewire parent component $ php artisan livewire:layout 生成主要 component $ php artisan make:livewire TestForm 將原本在 route 做的組件注入遷移至 TestForm 當中，由 Form 進行生成： Route::get('/', TestForm::class); //App\Livewire\TestForm.php class TestForm extends Component { public $email; // 放置變化結果 public function render() { $input = TextInput::make('email') ->label('Email Address'); return view('livewire.test-form', [ 'input' => $input ]); } } 到目前為止會是跟原本實作結果一致，接下來開始進行使 Label 具有 closure 傳遞調整： $input = TextInput::make('email') ->label(function () { return Str::random(); }); 到 TextInput field 進行 allow property：...

這篇文章是針對 Dan Harrin 在 laracasts 的影片進行的設計範例和理解筆記，其設計哲學貫穿整個 filament package，理解其原理可以為後續開發思路打下基礎。 Filament/livewire 設計概念是以 component 為基礎，透過對應設計達到 component based design，意思就是透過 component 完成功能。 設計 TextInput Component namespace App\Components; class TextInput { public function __construct( protected string $name ) { } // 透過靜態類別方法來創建實體，避免要寫 new TextInput() public static function make(string $name): self { // 由靜態類 new instance return new self($name); } // render view component public function render(): View { return view('components.text-input'); } 接下來創建其對應的 html component，components/text-input.blade.php: <input type="text" /> 在主要 layout 當中使用其組件，這邊我的主 layout 為 demo....

Global search 搜尋條件 以什麼欄位搜尋 // 單獨 protected static ?string $recordTitleAttribute = 'title'; // 多個 public static function getGloballySearchableAttributes(): array { return ['title', 'slug', 'author.name', 'category.name']; } 客製化搜尋結果欄位顯示，舉例來說 title = Yish 前面想要添加 author.name: public static function getGlobalSearchResultTitle(Model $record): string { return $record->author->name .':'. $record->name; } 添加更多內容在搜尋結果欄位內： public static function getGlobalSearchResultDetails(Model $record): array { return [ 'Author' => $record->author->name, 'Category' => $record->category->name, ]; } 使用何種 query 來作搜尋，這邊可以看到我們必須先 eager load author 和 category:...