Flexible Underlined Tabs Component For Vue – Tabz

A lightweight and easy-to-implement underlined tabs component for Vue applications.

How to use it:

1. Import and register the Tabz component.

import Vue from 'vue'
import vueTabz from 'vue-tabz'

Vue.use(vueTabz);

2. Add the Tabz component to the template.

<template>
  <vue-tabz
    :data="['Tab1', 'Tab2', 'Tab3']"
    @clickedTab="tabsHandler"
  />
</template>

3. Available tabs props.

data: {
  type: Array,
  default: () => [],
},
mainColor: {
  type: String,
  default: "",
},
maxWidth: {
  type: String,
  default: "",
},

Preview:

Download Details:

Author: ngTurk

Live Demo: https://61a2c69062d57a9e4da90ca5--condescending-borg-5673b3.netlify.app/

Download Link: https://github.com/ngTurk/vue-tabz/archive/refs/heads/master.zip

Official Website: https://github.com/ngTurk/vue-tabz

Install & Download:

# Yarn
$ yarn add vue-tabz

# NPM
$ npm i vue-tabz