Vue2Tabs

Vue Component for Vue 2.x

Install

    npm install vue2-tabs --save

Demo

For demo, please see here

Usage

1. Import the component

import Vue2Tabs from 'vue2-tabs';

2.1 Use it globally

Vue.use(Vue2Tabs);

// OR with options

Vue.use(Vue2Tabs, {baseURL: 'https://jsonplaceholder.typicode.com/', headers: {'X-API-KEY': 1234}});

*3. Access it locally

<template>
    <vue2-tabs ref="http" v-model="data" :error-fn="onError"></vue2-tabs>
</template>

components: {
    'vue2-tabs': Vue2Tabs
},

Properties

• index: Number

• addButton: any

• autoSwitch: Boolean (default: 1)

Example

<template>
    <div id="app">
        <div>
            <vue2-tabs add-button="Add" @add="tabs.push({title:'new', id:Math.random(),closable: true, text: 'new tab'})">
                <vue2-tab v-for="(tab, pos) in tabs" v-bind="tab" :key="tab.id" @close="tabs.splice(pos, 1)">
                    {{tab.text}}
                </vue2-tab>
            </vue2-tabs>
        </div>
    </div>
</template>

<script>
    import Vue from 'vue';
    import Vue2Tabs from '../src/index'

    Vue.use(Vue2Tabs, {});

    export default {
        name: 'app',
        data() {
            return {
                tabs: [
                    {title: 'TTS', icon: 'fa-bullhorn', closable: true, text: 'this is tts',},
                    {title: 'Record', icon: 'fa-mic', closable: false, text: 'this si record'},
                    {title: 'Upload', icon: 'fa-upload', closable: true, text: 'this si upload'},
                ],
            }
        },
        methods: {
            _(str) {
                return str;
            }
        },
    }
</script>

Contributing

Contributions are welcome

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build