vue-drip-navtab

Vue Drip Navtab is solution that could help you about use Tabs with VueJS 🎨

A Vue.js plugin to easily integrate button in your projects.

Vue Drip NavTab is a NavTab that works with other component Vue Drip Tab to give a lot of alternatives to work with.

Instalation

Install the package from npm by running:

# install dependencies
npm i @arikardnoir/vue-drip-navtab

then you install this too:

# install dependencies
npm i @arikardnoir/vue-drip-tab

Usage

Import, register and place the component in your Vue app.

<template>
    <VueDripNavTab borderColor="#2c3e50" tabTextColor="green" backgroundColor="#fff">
        <VueDripTab name="Normal" :selected="true">
            <p>Test 1</p>
            <p>Test 2</p>
        </VueDripTab>
        <VueDripTab name="IMAX">
            <p>Test 3</p>
        </VueDripTab>
    </VueDripNavTab>
</template>

import VueDripNavTab from '@arikardnoir/vue-drip-navtab'
import VueDripTab from '@arikardnoir/vue-drip-tab'

export default {
  components: {
    VueDripNavTab,
    VueDripTab
  }
}

Props

Components Property that make him cool

|Name |Type |Default |Required |Description | |------------------|--------------|------------------|----------------|-------------------------------------| |name |String | | |tabs name |selected |Boolean |false | |props to choose default Tab |borderColor |String | |true |change the borders colors |tabTextColor |String | |true |change the Tab text color |backgroundColor |String | |true |change the navtab background color

Examples

Some examples that how you could use this component