Home Examples Charts Dashboard Projects Menu

Vue.js examples
Learn Vue.js

vue tabs

Related:
Vue: Step-By-Step Guide To Mastering Vue.js From Beginner To Advanced (Vue.js, Learning Vue js 2)

Vue-tabs is a tab component which simplifies the usage of tabs and their customization

Create simplified, customizable bootstrap based tabs. There’s a variety of tabs you can make with this module including default tabs, colored tabs, vertical tabs and closable tabs.


vue tabs

vue tabs color

Install

You need npm or yarn to install vue-nav-tabs component.

npm install --save vue-nav-tabs 
yarn add vue-nav-tabs

Use

Include the vue module:

<link rel="stylesheet" href="https://unpkg.com/vue-nav-tabs/themes/vue-tabs.css">
<script src="https://unpkg.com/vue-nav-tabs/dist/vue-tabs.js"></script>

Register the Vue component:

//global registration
import VueTabs from 'vue-nav-tabs'
import 'vue-nav-tabs/themes/vue-tabs.css'
Vue.use(VueTabs)

//local registration
import {VueTabs, VTab} from 'vue-nav-tabs'
//you can also import this in your style tag
import 'vue-nav-tabs/themes/vue-tabs.css'
//component code
components: {
VueTabs,
VTab
}

You can define the tabs in HTML like this:

<vue-tabs>
<v-tab title="First tab">
First tab content
</v-tab>

<v-tab title="Second tab">
Second tab content
</v-tab>

<v-tab title="Third tab">
Third tab content
</v-tab>
</vue-tabs>

Github: http://github.com/cristijora/vue-tabs#readme


← vue tabs component vue places →

© vuejsexamples.net - Privacy Policy - Cookie Policy