vue-tmn-tabs

vue-tabs

The main idea of this package is to have a standalone tabs component that provides CSS classes to make it fit your project's style guide. Supports WAI ARIA for tabs with automatic activation

Install

$ npm install vue-tmn-tabs

$ yarn add vue-tmn-tabs

Register components

The most common way is to register components globally

import Vue from 'vue';
import { Tab, Tabs } from 'vue-tmn-tabs';

Vue.component('tab', Tab);
Vue.component('tabs', Tabs);

You can also do this locally

import { Tabs, Tab } from 'vue-tmn-tabs';

export default {
    components: {
        Tab,
        Tabs,
    },
};

Add styling

.vue-tabs {
}

.vue-tabs__nav {
    display: flex;
    align-items: baseline;
}

.vue-tabs__nav-item {
}

.vue-tabs__nav-item.--active {
}

.vue-tabs__panel {
}

.vue-tabs__panel[hidden="hidden"] {
    display: none;
}

.vue-tabs__panel-container {
}

Use components in your project

<tabs transitionName="fade">
    <tab :title="'Tab1'">
        <h1>Tab 1 content</h1>
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. !</p>
    </tab>
    <tab :title="'Tab2'">
        <h1>Tab 2 content</h1>
        <p>Inventore provident enim eos sint, alias dicta,
            totam in quo laborum aspernatur officiis.</p>
    </tab>
    <tab :title="'Tab3'">
        <h1>Tab 3 content</h1>
        <p>Quis harum dicta, facere incidunt suscipit voluptatum!</p>
    </tab>
    <tab :title="'Tab4'">
        <h1>Tab 4 content</h1>
        <p>Some example content!</p>
    </tab>
</tabs>

Props

Tab

Tab component has 1 prop and default slot:

• title - defines the title of a tab;
• slot - you can pass content into it.

Tabs

Tabs component has 3 props:

• defaultIndex - defines default active tab index;
• transitionName - transition name for tabs change animation;
• ariaLabelValue - is used to define a string that labels the current element