Tabs are a common visual component used through the web. In fact, this documentation uses tabs! Bulma only provides the required styles for the navigation part of the tabs. Because of this, we do need to modify the HTML so that we can correctly add the tabs etc. into our project.
Using the example from the Bulma docs, we'll need to change the HTML to look like the below.
<div class="tabs-wrapper">
<div class="tabs">
<ul>
<li class="is-active">
<a>Pictures</a>
</li>
<li>
<a>Music</a>
</li>
<li>
<a>Videos</a>
</li>
<li>
<a>Documents</a>
</li>
</ul>
</div>
<div class="tabs-content">
<ul>
<li class="is-active">
<h1>Pictures</h1>
</li>
<li>
<h1>Music</h1>
</li>
<li>
<h1>Videos</h1>
</li>
<li>
<h1>Documents</h1>
</li>
</ul>
</div>
</div>
Note: Due to the HTML changes you'll need to implement your own CSS styling to hide the inactive content boxes. An example of how to do this is below.
.tabs-content li {
display: none;
list-style: none;
}
.tabs-content li.is-active {
display: block;
}
You can also choose to have the content boxes change by just hoving over the tab nav item. To enable this simply add data-hover to your tabs.
<div class="tabs-wrapper" data-hover>
<div class="tabs">
<ul>
<li class="is-active">
<a>Pictures</a>
</li>
<li>
<a>Music</a>
</li>
<li>
<a>Videos</a>
</li>
<li>
<a>Documents</a>
</li>
</ul>
</div>
<div class="tabs-content">
<ul>
<li class="is-active">
<h1>Pictures</h1>
</li>
<li>
<h1>Music</h1>
</li>
<li>
<h1>Videos</h1>
</li>
<li>
<h1>Documents</h1>
</li>
</ul>
</div>
</div>
These are the events that this plugin emits when various actions happen. These can be listened to by using the on method.
| Name | Syntax | Description |
|---|---|---|
| Init | on('init') |
Called once the plugin has finished initialisation. |
| Destroyed | on('destroyed') |
Called when the tabs instance is destroyed. |