[Vue.js] Bulma Tabs
Add more features to Bulma tabs via Vue.js. The tab panel here is similar to Bootstrap tab. Click the following tabs to see the demo.
The following is the source code for above demo.
HTML:
<div id="vueapp">
<!-- Nav tabs -->
<div class="tabs">
<ul>
<li v-bind:class="{ 'is-active': tabsel == 'pic' }" @click="tabsel = 'pic'"><a>Pictures</a></li>
<li v-bind:class="{ 'is-active': tabsel == 'music' }" @click="tabsel = 'music'"><a>Music</a></li>
<li v-bind:class="{ 'is-active': tabsel == 'video' }" @click="tabsel = 'video'"><a>Videos</a></li>
<li v-bind:class="{ 'is-active': tabsel == 'doc' }" @click="tabsel = 'doc'"><a>Documents</a></li>
</ul>
</div>
<!-- Tab panes -->
<div class="content">
<div v-show="tabsel == 'pic'">My Pictures</div>
<div v-show="tabsel == 'music'">My Music</div>
<div v-show="tabsel == 'video'">My Videos</div>
<div v-show="tabsel == 'doc'">My Documents</div>
</div>
</div>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.6.2/css/bulma.min.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
We use the variable tabsel to indicate current selected tab. When users click on the tab, update tabsel and hence show the selected tab pane according to the value of tabsel. The is-active class of tabs will also be updated according to tabsel.
JavaScript:
'use strict';
var app = new Vue({
el: '#vueapp',
data: {
tabsel: "pic"
}
});
Set tabsel to pic in the initialization phase to make the home tab as default tab.
You can make the above code more reusable by Vue.js component. See [3] for more details.
Tested on:
- Chromium 63.0.3239.132 on Ubuntu 17.10 (64-bit)
- Vue.js 2.5.13
- Bulma 0.6.2
References:
| [1] | Tabs | Bulma: a modern CSS framework based on Flexbox |
| [2] | Class and Style Bindings — Vue.js |
| [3] | Vue.js Component for Bulma Tabs |