Vue-material-tabs NPM

Demo

⚓ Features

Touch swippe.
Vertical and animation support.
Flexible and customizable.
Zero dependencies.

🚚 Install

 yarn add vue-material-tabs  // npm install --save vue-material-tabs

🚀 Usage

Global

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

Vue.use(VueMaterialTabs);

Local

import { Tabs, TabItem } from "vue-material-tabs";

export default {
  components: {
    Tabs,
    TabItem,
  },
};

📌 Examples

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

Do use #name slot to customize the nav title (When the slot #name is used, the prop name is replaced)

<Tabs>
  <TabItem>
    <template #name>
        My custom title 🍉
    </template>

    <div class="first-tab">
      First tab
    </div>
  </TabItem>
</Tabs>

👑 Themes

There are some themes available to customize your tab nav.

default
purple
red
pink
cyan
green

Example

<Tabs theme="cyan">....</Tabs>

You can create your own custom themes, with theme prop.

Example

<Tabs :theme="theme" >
  ....
</Tabs>
....
<script>
  export default {
    data: () => ({
      theme: {
        nav: "#4A148C",
        navItem: "#BDBDBD",
        navActiveItem: "#fff",
        slider: "#CE93D8",
        arrow: "#f3f3f3",
      },
    }),
  };
</script>

Tabs

Props

Name	type	Default	description
value	String	undefined	The designated model value for the component.
theme	String - Object	'default'	Apply an available or customized theme.
vertical	Boolean	false	Uses a vertical transition when changing windows.
ripple	Boolean	true	Ripple tab nav effect.
slideDuration	String - Number	200	Set slide duration in `ms`.
slideVertical	Boolean	false	Vertical slide animation.
slide	Boolean - Object	false	Enable/disable slide or set object with props.
navAuto	Boolean	false	Organize tab nav items auto
navSlider	Boolean	true	Nav bar slider.
noTouch	Boolean	false	Swippe tab by touch.