@exapps/vue-tabs

VueTabs

Description

VueTabs is a simple and easy to use Vue.js component for creating tabs. It is designed to be easy to use and customizable. Multiple instances of the component can be used on the same page and it is easy to integrate with other Vue components. Also tabs in tabs will work.

Features

• Easy to use
• Customizable
• Multiple instances on the same page

Installation

npm install @exapps/vue-tabs --save

Usage

Easiest way to use the tabs:

import { Tabs, TabButton, TabContent } from '@exapps/vue-tabs';

<Tabs :tabs="{ tab1: 'Tab 1 Name', tab2: 'Tab 2 Name' }" default="tab1" class="mt-5">
    <TabContent name="tab1">
        Tab 1 content
    </TabContent>

    <TabContent name="tab2">
        Tab 2 content
    </TabContent>
</Tabs>

Other way to use the tabs:

<Tabs default="tab1" class="mt-5">
    <template #tabs>
        <TabButton name="tab1">
            Tab 1 Name
        </TabButton>
            
        <TabButton name="tab2">
            Tab 2 Name
        </TabButton>
    </template>
    
    <TabContent name="tab1">
        Tab 1 content
    </TabContent>
    
    <TabContent name="tab2">
        Tab 2 content
    </TabContent>
</Tabs>