0.0.17 • Published 10 months ago
h-vue-tabs v0.0.17
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. |
License
0.0.17
10 months ago
0.0.16
10 months ago
0.0.15
10 months ago
0.0.14
10 months ago
0.0.13
10 months ago
0.0.12
10 months ago
0.0.11
10 months ago
0.0.10
10 months ago
0.0.9
10 months ago
0.0.8
10 months ago
0.0.7
10 months ago
0.0.6
10 months ago
0.0.5
10 months ago
0.0.4
10 months ago
0.0.3
10 months ago
0.0.2
10 months ago
0.0.1
10 months ago