How to make a toogle button with visual change about nova-button

[dillingham]

You can use two buttons and ->visible($this->is_favorited)
You can also store svg icons and render as first param I believe
And maybe ->reload() to show the other button automatically
Or ->successText($icon) to avoid the reload maybe.

Haven't tried this, just speculating. Hope this helps!

$favoriteSvg = view()->make('svg.favorite')->render();
$unfavoriteSvg = view()->make('svg.unfavorite')->render();

Button::make($favoriteSvg, 'favorite_toggle')
    ->visible($this->is_favorited == false)
    ->reload(),

Button::make($unfavoriteSvg, 'favorite_toggle')
    ->visible($this->is_favorited)
    ->reload(),

Then you'd make a event / listener that attaches / detaches favorites

[didix16]

Thanks @dillingham. I'll try it 👍

[didix16]

Seems like it works but when successText is rendered , the new button has not a registered event, so I can't trigger again the toggle event.

I don't want to use reload because I want to toggle some of them at the same time.

Is there any chance to register again the event when successText is called?

Thanks in advance

[dillingham]

No not currently. That would require a new feature. Something like a toggle method with two passed events to switch between. I’m open to a PR but don’t have time to do that myself. Your other option is to fork this or use it as inspiration for your own custom field. Good luck!

[didix16]

Thanks @dillingham for the info!
I'll see what I'll do.

P.S: Do you know how can I edit a nova Vue component? I'm really newbie in Laravel and of course in Nova and I don't know how can I edit the resource table row for example. I don't know which file I have to look into nor edit, etc.

Thanks in advance