Hey there, one of the things I got asked is how to integrate AlpineJS to the dash app, which allows easier element state control and doing some simple interactions without calling and writing callbacks.
How to integrate?
Plotly does not allow extra html tag attribute, so when adding alpine attribute with default prefix “x-” will result in error. The easy way to solve this is to change the AlpineJS prefix in a js file to the prefix which are allowed by dash.html. In my case, I changed to “data-x-” and it worked.
Why to use?
I primarily use this to do some simple style and state control of the html tags on the client side which I don’t want to inflict callbacks and add more callbacks, and alpinejs makes it easy to do.
I’m confident that there are additional advanced applications; please feel free to include them in the comments."
-
For example this makes to hide some certain component when a url change
-
This change the component background color upon click, and also deactivates the style of the one that is clicked before. This makes components to communicate easily.
I’m confident that there are additional advanced applications; please feel free to add more in the comments if you would like to share.