Chrome Style Tabs Component For Vue.js – vue-tabs-chrome

Description:

A small Vue.js component that creates responsive, draggable, Chrome browser style tabs for tabbed content.

How to use it:

Insert the component into the template.

<template>
  <vue-tabs-chrome 
    v-model="tab" 
    :tabs="tabs" 
  />
</template>

Create a basic tabs component and define the label, key, and favicon for each tab as follows:

export default {
  data () {
    return {
      tab: 'Custom Tab',
      tabs: [
        {
          label: 'google',
          key: 'google',
          favico: require('./assets/google.jpg')
        },
        {
          label: 'facebook',
          key: 'facebook',
          favico: require('./assets/fb.jpg')
        },
        {
          label: 'New Tab',
          key: 'costom key',
          favico: (h, { tab, index }) => {
            return h('span', tab.label)
          }
        }
      ]
    }
  }
}

All default props.

value: {
  type: [String, Number],
  default: ''
},
tabs: {
  type: Array,
  default: () => []
},
props: {
  type: Object,
  default: () => {
    return {}
  }
},
minWidth: {
  type: Number,
  default: 40
},
maxWidth: {
  type: Number,
  default: 245
},
gap: {
  type: Number,
  default: 7
},
insertToAfter: {
  type: Boolean,
  default: false
},
theme: {
  type: String,
  default: ''
},
isMousedownActive: {
  type: Boolean,
  default: true
},
renderLabel: {
  type: Function
}

API methods.

// add new tab
addTab(tab1, [, ...tab, ...tabN])

// remove tab
removeTab(tabKey or index)

// get tab info
getTabs()

Download Details:

Author: viewweiwu

Live Demo: https://viewweiwu.github.io/vue-tabs-chrome/

Download Link: https://github.com/viewweiwu/vue-tabs-chrome/archive/master.zip

Official Website: https://github.com/viewweiwu/vue-tabs-chrome

Last Update: September 26, 2019

Install:

# NPM
$ npm install vue-tabs-chrome --save

You Might Be Interested In:

Tags:

Add Comment