Flexible Underlined Tabs Component For Vue – Tabz

Install & Download:

# Yarn
$ yarn add vue-tabz
# NPM
$ npm i vue-tabz

Description:

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: