Vue tmn 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](https://www.w3.org/TR/wai-aria-practices-1.1/examples/tabs/tab

Version: 1.0.3 Updated: 09/24/2019

By: Toomean License: MIT

Downloads Last 30 Days: 113

Install

npm i vue-tmn-tabs
yarn add vue-tmn-tabs

Repository: https://github.com/Toomean/vue-tabs

CDNs

bundle.run: https://bundle.run/vue-tmn-tabs

jsDelivr: https://cdn.jsdelivr.net/npm/vue-tmn-tabs

unpkg: https://unpkg.com/vue-tmn-tabs

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
Categories: Vue js