Some small pieces of modern vanilla JS code to make Bulma components interactive.
For now I've only made snippets that I have needed in a form useful for my usecase, this does not aim to cover all components for now.
Currently this only covers elements that exist before executing the code, dynamically created elements would require separate handling.
Modals will close using the cross in the corner that comes natively in Bulma modal. If you need to close modal by another button within the button, add class js-modal-close
to that button.
The modals.js
snippet also provides two global methods: modal.open(element)
and modal.close(element)
to programmatically control them.
To make tabs show and hide some content you must add a selector in the data-target
attribute of the respective control.
<div class="tabs">
<ul>
<li class="is-active" data-target="#picture-holder"><a>Pictures</a></li>
<li data-target="#music-player"><a>Music</a></li>
<li data-target=".document"><a>Documents</a></li>
</ul>
</div>
First tab will be enabled initially unless one of the tabs already has the is-active
class.