🌟 Tabsi

Convenient and easy way to implement Tabs, Tab lists and Tab Contents within your Vue apps.

Demo *the code used is in the Example below

✨ Features

• Easy to use
• Unlimited number of tabs
• Has some flexibility
• You can include pre-defined styles or add your own

---

📚 Getting Started

$ yarn add vue-tabsi
# or
$ npm install vue-tabsi

🚀 Usage

1. Using the components build the desired tabs structure. Using the v-model on the <v-tabs> component change the current tab shown however you want.
2. Add all of the <v-tabs> within the <v-tabs> component and assign a label to them that will be used in the tab list for the corresponding tab.
3. Add the content to each of the <v-tabs> as desired,
4. You are good to go! 🏭

// Example usage within a component
<template>
  <div id="app">
    <v-tabs v-model="currentTabIndex">
      <v-tab label="First Tab">
        <p>
          Hello from the First Tab.
        </p>
      </v-tab>
      <v-tab label="Second Tab">
        <p>
          Hello from the Second Tab.
        </p>
      </v-tab>
    </v-tabs>
  </div>
</template>

<script>
import Vue from 'vue';
import { VTab, VTabs } from 'vue-tabsi';

export default {
  components: {
    VTabs,
    VTab
  },

  tabs: {
    firstTab: 0,
    secondTab: 1
  },

  data() {
    return {
      currentTabIndex: this.$options.tabs.firstTab
    };
  }
};
</script>

You can also install the plugin and its sample styles and have these components globally available within all of your vue components.

import Vue from 'vue';
import VueTabsi from 'vue-tabsi';
import 'vue-tabsi/dist/vue_tabsi.css';

Vue.use(VueTabsi);

You can now use <v-tabs> and <v-tab> components anywhere in your Vue app.

📖 Documentation

There are two components that are included within this package

Tabs Component <v-tabs></v-tabs>

Props	Description	Type	Required	Default
currentIndex	The current tab index	Integer	true	-
tabsClass	Class of the root element	String	false	v-tabs
tabListClass	Class of the tab list element	String	false	v-tablist
tabListTabClass	Class of the tab element in the tab list	String	false	v-tablist-tab
tabActiveClass	Class of the tab list element	String	false	v-tab-active
wide	Wether to expand tablist to full width	Boolean	false	false

And there is only one event on this component:

Event	Description	Payload
change	When a tab is changed	Number [Index of the new tab]

---

Tab Component <v-tab></v-tab>

Props	Description	Type	Required	Default
label	Label used in the tab list	String	true	-
tabClass	Class of the root element	String	false	v-tab

---

⛑ Support

Reach out to me at one of the following places!

• Website at bangjelkoski.com
• Twitter at @bangjelkoski

---

🔓 License

• MIT license