A small Vue.js component that creates responsive, draggable, Chrome browser-style tabs for tabbed content.
Supports both Vue 2 and Vue 3.
How to use it:
1. Import and register the component.
// Vue 2
import Vue from 'vue'
import VueTabsChrome from 'vue-tabs-chrome'
export default {
components: {
VueTabsChrome
},
}
// Vue 3
import Vue3TabsChrome from 'vue3-tabs-chrome'
import 'vue3-tabs-chrome/dist/vue3-tabs-chrome.css'
import { defineComponent, reactive, ref } from 'vue'
export default defineComponent({
components: {
Vue3TabsChrome
},
})
2. Insert the component into the template.
<template>
<vue-tabs-chrome
v-model="tab"
:tabs="tabs"
/>
</template>
3. Create a basic tabs component and define the label, key, and favicon for each tab as follows:
// Vue 2
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)
}
}
]
}
}
}
// Vue 3
export default {
components: {
VueTabsChrome
},
data() {
return {
tab: 'google',
tabs: [
{
label: 'google',
key: 'google',
closable: false,
favicon: require('./assets/google.jpg')
},
{
label: 'facebook',
key: 'facebook',
favicon: require('./assets/fb.jpg')
},
{
label: 'New Tab',
key: 'any-string-key',
favicon: (h, { tab, index }) => {
return h('span', tab.label)
}
}
]
}
}
}
4. Available props for the tabs component.
// Vue 2
value: {
type: [String, Number],
default: ''
},
tabs: {
type: Array,
default: () => []
},
props: {
type: Object,
default: () => {
return {}
}
},
minWidth: {
type: Number,
default: 40
},
autoHiddenCloseIconWidth: {
type: Number,
default: 120
},
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
},
onClose: {
type: Function
},
tabCloseWidth: {
type: Number,
default: 16
}
// Vue 3
modelValue: {
type: [String, Number],
default: ''
},
tabs: {
type: Array as PropType<Tab[]>,
default: () => []
},
autoHiddenCloseIconWidth: {
type: Number,
default: 120
},
minWidth: {
type: Number,
default: 40
},
maxWidth: {
type: Number,
default: 245
},
gap: {
type: Number,
default: 7
},
onClose: {
type: Function
},
insertToAfter: {
type: Boolean,
default: false
},
isMousedownActive: {
type: Boolean,
default: true
},
renderLabel: {
type: Function
}
5. API methods.
// add new tab addTab(tab1, [, ...tab, ...tabN]) // remove tab removeTab(tabKey or index) // get tab info getTabs()
6. Events.
- click(event, tab, index)
- swap(tab, targetTab)
- remove(tab, index)
- contextmenu(event, tab, index)
- dragstart(event, tab, index)
- dragging(event, tab, index)
- dragend(event, tab)
Preview:
Changelog:
04/12/2022
- v0.3.2
03/04/2022
- Added Vue 3 version
Download Details:
Author: viewweiwu
Live Demo: https://viewweiwu.github.io/vue3-tabs-chrome/
Download Link: https://github.com/viewweiwu/vue3-tabs-chrome/archive/refs/heads/master.zip
Official Website: https://github.com/viewweiwu/vue3-tabs-chrome
Install & Download:
# Vue 2
$ npm install vue-tabs-chrome --save
# Vue 3
$ npm install vue3-tabs-chrome --save