Vue material tabs 🚀
⚓ Features
- Touch swippe.
- Vertical and animation support.
- Flexible and customizable.
- Zero dependencies.
🚚 Install
yarn add 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