https://github.com/bangjelkoski/vue-tabsi
Convenient and easy way to implement Tabs, Tab lists and Tab Contents within your Vue apps.
https://github.com/bangjelkoski/vue-tabsi
tab tablist tabs vue
Last synced: 4 months ago
JSON representation
Convenient and easy way to implement Tabs, Tab lists and Tab Contents within your Vue apps.
- Host: GitHub
- URL: https://github.com/bangjelkoski/vue-tabsi
- Owner: bangjelkoski
- License: mit
- Created: 2020-03-07T01:02:34.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-03-08T21:53:15.000Z (over 6 years ago)
- Last Synced: 2025-10-21T18:58:27.164Z (8 months ago)
- Topics: tab, tablist, tabs, vue
- Language: JavaScript
- Size: 205 KB
- Stars: 8
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# 🌟 Tabsi
[](https://www.npmjs.com/package/vue-tabsi)
[](https://www.npmjs.com/package/vue-tabsi)
[]()
_Convenient and easy way to implement Tabs, Tab lists and Tab Contents within your Vue apps._
[Demo](https://bangjelkoski.github.io/vue-tabsi/) _\*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
```bash
$ 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 `` component change the current tab shown however you want.
2. Add all of the `` within the `` 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 `` as desired,
4. You are good to go! 🏭
```vue
// Example usage within a component
Hello from the First Tab.
Hello from the Second Tab.
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
};
}
};
```
You can also install the plugin and its sample styles and have these components globally available within all of your vue components.
```javascript
import Vue from 'vue';
import VueTabsi from 'vue-tabsi';
import 'vue-tabsi/dist/vue_tabsi.css';
Vue.use(VueTabsi);
```
You can now use `` and `` components anywhere in your Vue app.
## 📖 Documentation
There are two components that are included within this package
**Tabs Component ``**
| 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 ``**
| 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
[](https://badges.mit-license.org)
- **[MIT license](https://opensource.org/licenses/mit-license.php)**