Material Design Inspired Tabs UI Component For Vue

Description:

A highly customizable tabs component inspired by Android material design.

Features:

  • Horizontal & Vertical tabs.
  • Dark Mode.
  • Slide transitions.
  • Ripple click effect.
  • Dynamic tabs addition.

How to use it:

1. Import the Material Tabs component.

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

2. Register the component.

// global
Vue.use(Tabs);
// local
import { tabs, tab } from "vue-material-tabs";
export default {
  components: {
    tabs,
    tabItem,
  },
};

3. Create a tabs component in the app.

<Tabs>
  <TabItem name="Tab1">
    <div class="first-tab">First tab</div>
  </TabItem>
  <TabItem name="Tab2">
    <div class="second-tab">Second tab</div>
  </TabItem>
  <TabItem name="Tab3">
    <div class="last-tab">Last tab</div>
  </TabItem>
</Tabs>

4. Available props to customize the tabs component.

theme: {
  type: [Object, String],
  // default, purple, red, pink, cyan, green
  default: "default",
},
vertical: Boolean,
ripple: {
  type: Boolean,
  default: true,
},
slideDuration: {
  type: [String, Number],
  default: 200,
},
slideVertical: Boolean,
slide: {
  type: Boolean,
  default: true,
},
navAuto: Boolean,
navSlider: {
  type: Boolean,
  default: true,
},
noTouch: Boolean,

5. Events.

  • @input: when tab is changed
  • @change: when tab is changed by user interaction

Preview:

Material Design Inspired Tabs UI Component For Vue

Changelog:

v0.1.6 (07/18/2021)

  • create: model handle

v0.1.5 (06/30/2021)

  • update

v0.1.4 (06/23/2021)

  • update

v0.1.3 (06/21/2021)

  • add: no touch option

v0.1.2 (06/12/2021)

  • Update

v0.1.2 (06/12/2021)

  • Update

v0.1.0 (05/22/2021)

  • fix: slots reactive

v0.0.9 (05/18/2021)

  • Bugfix

Download Details:

Author: jairoblatt

Live Demo: https://vue-material-tabs.vercel.app/

Download Link: https://github.com/jairoblatt/vue-material-tabs/archive/refs/heads/master.zip

Official Website: https://github.com/jairoblatt/vue-material-tabs

Install & Download:

# Yarn
$ yarn add vue-material-tabs

# NPM
$ npm i vue-material-tabs --save

You Might Be Interested In:

Tags:

Add Comment