How to add a CSS class to a v3 widget?
In v2 of Filament, I have a blade file in resources/views/filament/widgets ... the very first line was
<x-filament::widget class="my-css-class-name">. I saw in the "Upgrading from v2.x" documentation that has now changed to <x-filament-widgets::widget>. I made that change but my-css-class-name is not being added to the generated HTML. How do I do that now?5 Replies
->extraAttributes(['class' => 'xx']) ?You should be able to add classes in the view right?
Thanks. Yes, can I still do it in the view in v3?
That does not work because apparently that is only for "Stats overview" widgets? https://filamentphp.com/docs/3.x/widgets/stats-overview#adding-extra-html-attributes-to-a-stat
Please note that I am not a backend developer. I'm a frontend dev just trying to figure out how to add a class name to a widget with these breaking changes from v3.
It seems adding a <div> around the entire blade view contents and add the needed classes in that div worked. But it is still a bit weird to do it like that?
Adding a class attribute to the component tag
<x-filament-widgets::widget> did not work, it is ignored/replaced
Using {{ $attributes->merge(['class' => 'test-class']) }} on the component tag did not work either, gives the error: Call to a member function merge() on null.
I did see there was a $component var, which did had an attributes property. But doing the merge via that way (<x-filament-widgets::widget {{ $component->attributes->merge(['class' => 'test-class']) }}>) I got the error syntax error, unexpected token "endif", expecting end of file.
So not sure what the correct approach would be? For now this is working with just a regular div around the entire blade template: <div class="katoo-plus-themes-widget col-[--col-span-default]" style="--col-span-default: span 2 / span 2;"> - but that doesn't feel right... So I'm sure I'm missing something obvious 🙂