🐾

laravel10/filament v3/Alpinejsカスタムフィールドを使ってみた

2024/01/14に公開

Alpine

filament3カスタムフィールドを使ってみた

filament3のカスタムフィールドを使用してみた記事がなかったので、自分のメモ用も兼ねて記事にしました。

filament3のカステムフィールドの詳しいことについては以下のドキュメントを参照してください。

とりあえず使ってみたという記事なのです。

早速使ってみた

To create a custom field class and view, you may use the following command:

以下コマンドでカスタムフィールドクラスとビューを作成してくれるそうなので、実行します。

php artisan make:form-field RangeSlider

私はGitを入れているので、以下のように自動生成されたファイルが見えるようになっています。
ドキュメントの通り、ファイルが生成されています。

app/Forms/Components/RangeSlider.php
resources/views/filament/forms/components/range-slider.blade.php

中を確認します。

app/Forms/Components/RangeSlider.php

<?php

namespace App\Forms\Components;

use Filament\Forms\Components\Field;

class RangeSlider extends Field
{
    protected string $view = 'forms.components.range-slider';
}

resources/views/filament/forms/components/range-slider.blade.php

<x-dynamic-component :component="$getFieldWrapperView()" :field="$field">
    <div x-data="{ state: $wire.$entangle('{{ $getStatePath() }}') }">
        <!-- Interact with the `state` property in Alpine.js -->
        <input x-model="state" />
    </div>
</x-dynamic-component>

コードを見ればわかるのですが、
とりあえずFieldを継承して、forms.components.range-sliderを参照するようにしていますね。
range-slider.blade.phpの方は、LaravelのBladeテンプレートエンジンとAlpine.jsを使用していますね。

試しにAlpine.jsを使用したテキスト入力フィールドをrangeに変えてみたいと思います。
（テキスト入力フィールドのままにしてもカスタムフィールドを作成した意味ないですからね....）
User idで試してみます。試す方はint型の値で試してください。
修正前

<input x-model="state" />

修正後

<input type="range" x-model="state" min="0" max="1" step="0.1">
<span x-text="state"></span>

最後に

今回、filament3にデフォルトではないrangeフィールドをカスタムフィールドを使用して作成してみました。
今後のfilament3を使って色々試してみようと思います。

filament3カスタムフィールドを使ってみた

早速使ってみた

最後に

Discussion