Neat ways of dynamically showing/hiding controls using Alpine in Aire

[npw1982]

Hi all,

Am scoping Aire at the moment and it looks great, just checking it against our existing components and wondered if anyone had any neat ways they implement dynamically showing and hiding controls using Alpine in Aire?

We do something similar in our current views with x-show and x on-change that hides the input group, but wondered if anyone had a neat implementation they wouldn't mind sharing an example of (done in an aire-ish way?).

Thanks,
Neil

PS - a way of managing this via Aire methods in future would make this an absolute no brainer to use on everything!

[npw1982]

Further to this, is there a way to use setAttribute() at the group level, rather than the element level?

[inxilpro]

Right now the best way to do this is just using setAttribute — but I definitely agree that some Alpine-specific helpers would be great. For example, right now, we'll do something like:

{{ Aire::submit()
   ->disabled()
   ->class('btn btn-gray cursor-not-allowed')
   ->setAttribute('x-bind:class', '{ "btn-gray cursor-not-allowed": !requestable, hidden: saving }')
   ->setAttribute('x-bind:disabled', '!requestable') }}

As for setting attributes on the group, I think groupSetAttribute() should work (if you prefix anything with "group" it will pass the call to the group rather than the element).

[npw1982]

Thanks for the reply :) totally missed that group trick, that is really helpful :)