BETA
Sort by:
Sorting

All pages will be filtered by your selected preferences

Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)
Buy us a coffeePsst! We're working to help you locate only the best packages and tools. If you think we're doing a good job, buy us a coffee :)

vue-tabs-chrome

chrome tab like.


142
3 months ago
180

vue-tabs-chrome

A Vue2 component for Chrome-like tabs.
Drag-and-drop support provided by Draggabilly by @desandro.

If you are using Vue3, please see here. https://github.com/viewweiwu/vue3-tabs-chrome

Live Demo

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

Code Sandbox Example

https://codesandbox.io/s/kind-wave-00ipv?file=/src/App.vue

CDN

https://codepen.io/viewweiwu/pen/GRmKaZZ

Install

npm i vue-tabs-chrome -S

Usage

<template>
  <vue-tabs-chrome v-model="tab" :tabs="tabs" />
</template>
<script>
  import Vue from 'vue'
  import VueTabsChrome from 'vue-tabs-chrome'

  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)
            }
          }
        ]
      }
    }
  }
</script>

Attributes

AttributesDescriptionTypeDefault
tabstabs configuration. Details are mentioned below.Array[]
value / v-modelbinding valueString-
propsconfiguration options, Details are mentioned below.
insert-to-afterInsert to tag's afterBooleanfalse
is-mousedown-activeset tab is active when mousedownBooleantrue
render-labelrender labelFunction(tab, index)-
auto-hidden-close-icon-widthauto hidden close tab width. if tabWidth < 120, close icon can not show. If you donb�t want this feature, you can set the value to 0.Number120
on-closewhen tab close btn click. if return false, it cannot be closed.Function(tab, key, index)-
tab-close-widthtab close icon width.Number16

Tabs Attributes

AttributesDescriptionTypeDefault
labeltab labelString-
keytab keyString-
classtab classString-
closabletab closableBooleantrue
dragabletab tragableBooleantrue
swappabletab swappableBooleantrue
favicontab favicon. Custom favicon renderer. It uses Vue's render function. It accepts two arguments: the first is h, the second is an object. including tab and indexFunction, required image-

Props Attributes

AttributesDescriptionTypeDefault
labelspecify which key of tab object is used as the tab's labelString'label'
keyspecify which key of tab object is used as the tab's keyString'key'

Methods

MethodDescriptionParameters
addTabadd tab(tab1, [, ...tab, ...tabN])
removeTabremove tab(tabKey or index)
getTabsget tabs-

Events

Event NameDescriptionParameters
clickTriggered when the user's pointer is pressed and unpressed and has not moved enough to start dragging.(event, tab, index)
swapSwap tab(tab, targetTab)
removeRemove tab(tab, index)
contextmenuContextmenu event(event, tab, index)
dragstartTab dragstart event(event, tab, index)
draggingTab dragstart event(event, tab, index)
dragendTab dragend event(event, tab)

Slots

AttributesDescription
afterTab after slot
close-iconClose icon

Change log

0.10.0

  1. feat: Add Custom Close Button.

v0.9.2

  1. fix: 'v0.9.1' doesn't work

v0.9.1

  1. fix: 'dragable' needs to respond to the 'click' event.

v0.9.0

  1. feat: tab can set dragable.
  2. feat: tab can set swappable.
  3. feat: can be introduced with "Vue.components" instead of "Vue.use".
  4. feat: new example UI.
  5. feat: new 'Chrome UI' example.
  6. feat: new 'swap & drag' example.
  7. remove: remove 'Save to Localstorage' example.

2020/9/21

fix: tab[key] => tab[this.tabKey]

2020/9/21

feat: add after slots feat: add drag events

2020/9/7

fix: closable not work feat: auto hidden close tab width

2020/8/19

add new feature: tab close event listener & tab custom class

2020/2/10

add new feature: tab closable

License

MIT