3
[Vue.js] Bulma Tabs
source link: http://siongui.github.io/2018/01/26/vuejs-bulma-tabs/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
[Vue.js] Bulma Tabs
Updated: October 08, 2018
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/[email protected]/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:
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK