A Vue plugin that helps you to create re-usable tab components that aids in smooth routing. The h-vue-tabs package provides a flexible and customizable tab navigation component for Vue.js applications. Easily switch between tabs and control the active tab using the router.
Demo
Installation
Vue Apps
Install:
yarn add h-vue-tabs # or use npm npm install h-vue-tabs
Then, import and register the component:
# main.ts or main.js
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router';
import HVuetabs from 'h-vue-tabs';
import 'h-vue-tabs/dist/style.css';
const app = createApp(App)
app.use(router)
app.use(HVuetabs);
app.mount('#app')
Remember to add import the css file import 'h-vue-tabs/dist/style.css'
Usage
<script setup>
import { ref } from "vue";
const tabs = ref(['one', "two"])
</script>
<template>
<Tab :tabs="tabs" :activeTabIndex="0" activeTabColor="red"></Tab>
</template>
Component Parameters
ParameterTypeDefaultDescriptiontabs (required)Array[]TabsList.activeTabIndexNumber0activeTab Index Number on the array, starts from 0.activeTabColorString#000000activeTab Color.
