Vue Tabs Components vue-nav-tabs
In this Post We Will Explain About is Vue Tabs Components vue-nav-tabs With Example and Demo.Welcome on Pakainfo.com – Examples, The best For Learn web development Tutorials,Demo with Example! Hi Dear Friends here u can know to Vuejs tab navigation Example
In this post we will show you Best way to implement Vuejs material tabs, hear for Vuejs bootstrap tabs and Vuejs tab routing with Download .we will give you demo,Source Code and examples for implement Step By Step Good Luck!.
Vue.js Tabs tutorial using Components
Simplified, very customizable bootstrap based tabs using Vue-tabs is a tab simple component which simplifies more the usage of vue tabs and their some customizationvue-nav-tabs
npm install vue-nav-tabs
Vue-tabsTabs is an some extension of navs, to make tabbable panes of local data content, even via simple dropdown menus.
Include external Js libs
bootstrap.min.css vue.js bootstrap.min.js
index.html File
{{tab.name}}
Pakainfo.com
{{ $data | json }}
Javacript files
Vue.component('query-browser-tab', {
template: '#queryBrowserTab',
data: function () {
return {
databaseOptions: [],
};
},
props: ['tab'],
methods: {},
});
new Vue({
el: '#live_tab_examples',
data: {
live_tabs: [{
name: "tab1",
id : 0,
tab_active: true
}],
current_tab: {}
},
ready: function () {
this.tab_set_act(this.live_tabs[0]);
},
methods: {
tab_set_act: function (tab) {
var self = this;
tab.tab_active = true;
this.current_tab = tab;
/*Pakainfo.com this.current_tab.tab_active = true;
console.log("current_tab name=" + this.current_tab.name);*/
this.live_tabs.forEach(function (tab) {
console.log("TAB => " + tab);
console.log("current_tab id => " + self.current_tab.id);
console.log("tab id=" + tab.id);
if (tab.id !== self.current_tab.id) { tab.tab_active = false;}
});
},
Tab_new: function () {
add_newtab = {
name: "tab" + (this.live_tabs.length + 1),
id: this.live_tabs.length,
tab_active: true
};
this.live_tabs.push(add_newtab);
this.tab_set_act(add_newtab);
/*Pakainfo.com this.current_tab = add_newtab;
console.log("###Pakainfo.com newtab name=" + add_newtab.name);*/
},
closeTab: function () {
console.log("###Pakainfo.com CLOSE!");
}
}
});
I hope you have Got What is Vuejs material tabs example And how it works.I would Like to have FeadBack From My Blog(Pakainfo.com) readers.Your Valuable FeadBack,Any Question,or any Comments abaout This Article(Pakainfo.com) Are Most Always Welcome.