Material Design Inspired Tabs UI Component For Vue

Install & Download:

# Yarn
$ yarn add vue-material-tabs
# NPM
$ npm i vue-material-tabs --save

Description:

A highly customizable tabs component inspired by Android material design.

Features:

Horizontal & Vertical tabs.
Dark Mode.
Slide transitions.
Ripple click effect.
Dynamic tabs addition.

How to use it:

1. Import the Material Tabs component.

import Vue from "vue";
import Tabs from "vue-material-tabs";

2. Register the component.

// global
Vue.use(Tabs);
// local
import { tabs, tab } from "vue-material-tabs";
export default {
  components: {
    tabs,
    tabItem,
  },
};

3. Create a tabs component in the app.

<Tabs>
  <TabItem name="Tab1">
    <div class="first-tab">First tab</div>
  </TabItem>
  <TabItem name="Tab2">
    <div class="second-tab">Second tab</div>
  </TabItem>
  <TabItem name="Tab3">
    <div class="last-tab">Last tab</div>
  </TabItem>
</Tabs>

4. Available props to customize the tabs component.

theme: {
  type: [Object, String],
  // default, purple, red, pink, cyan, green
  default: "default",
},
vertical: Boolean,
ripple: {
  type: Boolean,
  default: true,
},
slideDuration: {
  type: [String, Number],
  default: 200,
},
slideVertical: Boolean,
slide: {
  type: Boolean,
  default: true,
},
navAuto: Boolean,
navSlider: {
  type: Boolean,
  default: true,
},
noTouch: Boolean,

5. Events.