hv-tabs

Tabs manager vuejs

Table of contents

• Installation
• Usage
• Example

Installation

npm install --save hv-tabs

Default import

import Vue from 'vue'
import { Tabs } from 'hv-tabs'
 
Vue.component('tabs', Tabs)

⚠️ A css file is included when importing the package. You may have to setup your bundler to embed the css in your page.

Source import

Use specific components:

import Vue from 'vue'
import { Tabs } from 'hv-tabs/src'
 
Vue.component('tabs', Tabs)

⚠️ You need to configure your bundler to compile .vue files. More info in the official documentation.

Browser

<link rel="stylesheet" href="hv-tabs/dist/hv-tabs.css"/>
 
<script src="vue.js"></script>
<script src="hv-tabs/dist/hv-tabs.browser.js"></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the components:

Vue.use(HVTabs)

Use specific components:

Vue.component('tabs', HVTabs.Tabs)

Usage

Insert to root

<template>
<div>
  <Tabs :namespace="'namespace_name'" ></Tabs>
<div>
</template>
<script>
import {Tabs,activeTab,activeOrOpenTab,openTab} from 'hv-tabs'
export default {
  components: {Tabs}
}
</script> 

Active or open new TAB

import {activeTab,activeOrOpenTab,openTab,closeTab} from 'hv-tabs'
 
import AnotherComponent from './AnotherComponent.vue'
 
// OPEN NEW TAB
let tab = openTab('namespace name','tab name',{component:AnotherComponent,bind:{},on:{}})
 
// active or open tab
tab = activeOrOpenTab('namespace name','tab name',{component:AnotherComponent,bind:{},on:{}})
 
// Active tab
tab.active()
// or
activeTab(tab)
 
// close tab
tab.close()
// or
closeTab(tab)
 

Example

<template>
<div class="wrapper">
  <div>
    <a href="#" @click.prevent="open('tab1')">Tab 1</a>
    <a href="#" @click.prevent="open('tab2')">Tab 2</a>
    <a href="#" @click.prevent="open('tab3')">Tab 3</a>
  </div>
  <div style="height:90vh">
    <Tabs :namespace="'main'"></Tabs>
  </div>
</div>
</template>
 
<script>
import {
  Tabs,
  openTab,
  activeOrOpenTab
} from 'hv-tabs'
import Tab from './Tab.vue'
export default {
  name: 'app',
  components: {
    Tabs,
    Tab
  },
 
  methods: {
    open(name) {
      let props = {
        name: 'tom',
        age: '10'
      }
      let on = {
        submit: ()=>{
          console.log('submit')
        }
      }
      let tab = activeOrOpenTab('main', name, {
        title: name + ' tab instance',
        component: Tab,
        bind: {
          ...props
        },
        on: {
          ...on,
 
          clickBtn1: ()=>{
            tab.close()
          },
          clickBtn2: ()=>{
            tab.rebuild()
          },
          clickBtn3: ()=>{
            tab.active()
          }
        }
      })
      console.log(tab);
    }
  }
}
</script> 
 
<style scoped>
.wrapper {
  height: 100vh;
}
</style> 
 

License

MIT