How can I use Filament styles?

Sorry - I just started using Filament today.

I want to create a custom blade view for rendering a form component. The field in question is a JSON field that stores an array of strings. I want this rendered as multiple input fields. How can I make it so the input fields match the default Filament styles? Is there a component or partial I can use? Surely I don't just to manually copy all the Tailwind strings from a filament input to match the styling?

Here's my code so far:

{{-- filament.forms.components.json-array-as-html-list.blade.php --}}
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

<div x-data="{ state: $wire.$entangle('data.comments') }")>
    <template x-for="(item, idx) in state" :key="idx">
        <input x-model="state[idx]" type="text" class="form-input" />
    </template>
</div>
</x-dynamic-component>

{{-- filament.forms.components.json-array-as-html-list.blade.php --}}
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

<div x-data="{ state: $wire.$entangle('data.comments') }")>
    <template x-for="(item, idx) in state" :key="idx">
        <input x-model="state[idx]" type="text" class="form-input" />
    </template>
</div>
</x-dynamic-component>

// app/Filament/Resources/FeedbackResource.php
ViewField::make('comments')->view('filament.forms.components.json-array-as-html-list'),

// app/Filament/Resources/FeedbackResource.php
ViewField::make('comments')->view('filament.forms.components.json-array-as-html-list'),

Solution

there is blade components:
https://filamentphp.com/docs/3.x/support/blade-components/overview

Jump to solution

Filament•2y ago•

4 replies

jamespickard

How can I use Filament styles?

{{-- filament.forms.components.json-array-as-html-list.blade.php --}}
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

<div x-data="{ state: $wire.$entangle('data.comments') }")>
    <template x-for="(item, idx) in state" :key="idx">
        <input x-model="state[idx]" type="text" class="form-input" />
    </template>
</div>
</x-dynamic-component>

{{-- filament.forms.components.json-array-as-html-list.blade.php --}}
<x-dynamic-component
    :component="$getFieldWrapperView()"
    :field="$field"
>

<div x-data="{ state: $wire.$entangle('data.comments') }")>
    <template x-for="(item, idx) in state" :key="idx">
        <input x-model="state[idx]" type="text" class="form-input" />
    </template>
</div>
</x-dynamic-component>

// app/Filament/Resources/FeedbackResource.php
ViewField::make('comments')->view('filament.forms.components.json-array-as-html-list'),

// app/Filament/Resources/FeedbackResource.php
ViewField::make('comments')->view('filament.forms.components.json-array-as-html-list'),

Solution

there is blade components:
https://filamentphp.com/docs/3.x/support/blade-components/overview

Jump to solution

How can I use Filament styles?

How can I use Filament styles?

Similar Threads

Similar Threads

Similar Threads