🦝 Material Design Inspired Tabs UI Component for Vue 2

Vue material tabs are a component of a tab based on the material design that is used to show one content at a time and can also be used with page navigation.

tabs ui design examples, material design tabs, material design tabs example, tabs design, material design tabs react, tablayout material design, material tabs

Features

Dynamic pagination and touch screen.
Vertical navigation and animation support.
Very flexible and customizable.
Many topics.
Zero Dependencies

How to make use of it:

Install and download:

# Yarn
$ yarn add vue-material-tabs

# NPM
$ npm i vue-material-tabs --save

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 the tabs component in the application.

<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. Props available to customize 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,

Material Design Inspired Tabs UI Component For Vue, Vue material tabs Plugin/Github