Material Design Tabs For Vue.js

Category: Vue.js Vue.js Others | July 20, 2021
Author: jairoblatt
Official Page: Go to website
Last Update: July 20, 2021
License: MIT

vue material tabs

Description:

A fully customizable material design tabs for Vue.js, which is inspired by Android Material Design and easy to integrate in your project and light-weight.

Features:

  • Nav with dynamic pagination.
  • Touchable pagination.
  • Vertical support.
  • Very flexible and customizable
  • Multiple style themes.
  • Zero dependencies

How can I use it?

1. Install the component.

#yarn
yarn add vue-material-tabs

#npm
npm install --save vue-material-tabs

2. Import the component in your file.

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

3. Now, register the component.

#for global
Vue.use(Tabs);

#local
export default {
  components: {
    tabs,
    tabItem,
  },
};

4. Create the tabs as many as required.

<Tabs>
  <TabItem name="Foo">
    <div class="first-tab">First tab</div>
  </TabItem>
  <TabItem name="Bar">
    <div class="second-tab">Second tab</div>
  </TabItem>
</Tabs>