h-vue-tabs
v0.0.17
Published
A Vue Vite Plugin for building Tab components
Downloads
44
Readme
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.
Sample
mobile friendly
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
Parameter | Type | Default | Description
--------- | ---- | ------- | -----------
tabs (required) | Array
| [] | TabsList.
activeTabIndex | Number
| 0 | activeTab Index Number on the array, starts from 0.
activeTabColor | String
| #000000
| activeTab Color.