Wondering what’s next for npm?Check out our public roadmap! »

    vue-tmn-tabs

    1.0.3 • Public • Published

    vue-tabs Build Status Coverage Status License: MIT

    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

    Install

    npm i vue-tmn-tabs

    DownloadsWeekly Downloads

    93

    Version

    1.0.3

    License

    MIT

    Unpacked Size

    884 kB

    Total Files

    88

    Last publish

    Collaborators

    • avatar