hv-tabs v1.0.1

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