Bind class on action button ?

Try to implement class on using x-bind:class

Action::make('export')
    ->accessSelectedRecords()
    ->action(function (Collection $selectedRecords) {
         return Excel::download...
    })
    ->extraAttributes([
         'x-bind:disabled' => 'selectedRecords.length === 0',
         'x-bind:class' => "{ 'bg-danger-100': selectedRecords.length === 0 }"
    ])
    ->tooltip('Please select at least one record to export'),

Action::make('export')
    ->accessSelectedRecords()
    ->action(function (Collection $selectedRecords) {
         return Excel::download...
    })
    ->extraAttributes([
         'x-bind:disabled' => 'selectedRecords.length === 0',
         'x-bind:class' => "{ 'bg-danger-100': selectedRecords.length === 0 }"
    ])
    ->tooltip('Please select at least one record to export'),

But not working , can we bind class into action button ?

Solution:

try

'x-bind:class' => new HtmlString("{ '!bg-danger-100': selectedRecords.length === 0 }")

'x-bind:class' => new HtmlString("{ '!bg-danger-100': selectedRecords.length === 0 }")

...

Themes - Panels - Filament

Jump to solution

5 Replies

Solution

LeandroFerreira•21h ago

try

'x-bind:class' => new HtmlString("{ '!bg-danger-100': selectedRecords.length === 0 }")

'x-bind:class' => new HtmlString("{ '!bg-danger-100': selectedRecords.length === 0 }")

Don't forget to create a custom theme and run npm run dev

Themes - Panels - Filament

khairulazmi_OP•21h ago

I did not use panels. I use this as livewire component . do i need to create custom theme ? @LeandroFerreira .

LeandroFerreira•21h ago

khairulazmi_OP•21h ago

Thanks , it works . may I know why ? @LeandroFerreira

LeandroFerreira•21h ago

I think you need to use ! to force the class and use HtmlString to Html content

Gaming

Programming

Bind class on action button ?

Did you find this page helpful?