Skip to content

tontonsb/bulma-interactions

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

3 Commits
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Bulma interactions

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

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.

Tabs

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.

About

Snippets for Bulma interactivity

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published