vue-material-tabs

Vue 2 tabs component ❤

Demo

⚓ Features

• Pagination of nav and tabs
• Pagination touchable
• Vertical support
• Very flexible and customizable
• Multiple style themes

🚚 Install

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

🚀 Usage

Global

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

Vue.use(Tabs);

Local

import { tabs, tab } 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>

You can customize the name in the nav by slot #name (This removes the use of the prop name)

<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, you can apply them through the "theme" prop.

The default theme is, guess what, default, curious isn't it?!

• default
• purple
• red
• pink
• cyan
• green

Example

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

You can create your own personalized themes, passing an object with the properties through the "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 | '' | The designated model value for the component. | | theme | String - Object | 'default' | Apply a custom theme | | vertical | Boolean | false | Uses a vertical transition when changing windows. | | ripple | Boolean | true | Enalbe/disable ripple buttons effects. | | slideDuration | String - Number | 200 | Set time in ms slide duration. | | slideVertical | Boolean | false | Enable vertical slide animation. | | slide | Boolean - Object | false | Enable/disable slide or set object with props. | | navAuto | Boolean | false | Set nav auto items. | | navSlider | Boolean | true | Enable/disable slider under nav item. |

Slots

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

Events

| Name | Description | | ------ | ------------------------------------------------ | | input | Emitted when tab is changed. | | change | Emitted when tab is changed by user interaction. |

TabItem

Props

| Name | type | Default | description | | -------- | ------- | ----------- | ----------------------------------------------------- | | name | String | 'Tab Item ' | Sets the tab value in the nav menu. | | disabled | Boolean | false | Removes the ability to click or target the component. |

Slots

| Name | Description | | ---- | -------------------------- | | name | Slot for cutom name in nav |

🔖 License

MIT