Skip to content

README.md

Latest commit

 

History

History
149 lines (129 loc) · 2.98 KB

README.md

File metadata and controls

149 lines (129 loc) · 2.98 KB

Vue-tabs

Simplified, customizable bootstrap based tabs Vue-tabs is a tab component which simplifies the usage of tabs and their customization

Demos

NPM/YARN

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

Direct script include

<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>

Component registration

//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
}
<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>

Theming

Vue-tabs supports 3 different themes by default:

Props

Vue-tabs props

props: {
  activeTabColor: String,
  activeTextColor: String,
  /**
   * Tab title position: center | bottom | top
   */
  textPosition: {
      type: String,
      default: 'center'
  },
  /**
   * Tab type: tabs | pills
   */
  type: {
      type: String,
      default: 'tabs'
  },
  direction: {
      type: String,
      default: 'horizontal'
  },
  /**
   * Centers the tabs and makes the container div full width
   */
  centered: Boolean,
  value: [String, Number, Object]
}

V-tab props

props: {
  title: {
    type: String,
    default: ''
  },
  icon: {
    type: String,
    default: ''
  }
}

!> Important Not all prop combinations will look ok or display correctly (especially centered with vertical direction). Feel free to do a PR if you fixed something :)

Events

Event Name Params
tab-change tabIndex, newTab, oldTab
input tabTitle
tab-added tabsLength

tab-change example

Template

<vue-tabs @tab-change="handleTabChange">
    <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>
methods:{
    handleTabChange(tabIndex, newTab, oldTab){
        //your code here
    }
}

JSFiddle example - https://jsfiddle.net/b44cc4dq/56/