vue-material-tabs

Vue material tabs 🚀

Tab component based on material design, used to show content one at a time, it can also be used as a browser between pages.

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.

Slots

Name	Description	Props
nav	Slot to replace the nav menu.	{ navItems: Array, active: String }

Events

Name	Description
input	Emitted when tab is changed.

TabItem

Props

Name	type	Default	description
name	String	'Tab Item'	Tab item title
disabled	Boolean	false	Removes the ability to click or target the component.

Slots

Name	Description
name	Custom tab nav name

🔖 License

MIT