white-vue-tab-component

This module is intended to separate content into sections. Accessable via a single content area using a flat navigation structure that does not refresh the page when selected. Tabs are inspired by their use in file cabinets where they separate sections of files. Although there are no real differences with a normal horizontal bar, the shape of the tabs makes the menu less boring and more visually outstanding.

Notes

• Implementes accessabillity in compliance with http://accessibility.athena-ict.com/aria/examples/tabpanel2.shtml
• Testing library used http://jasmine.github.io/2.5/introduction

Run Module

• Make sure you have nodeJs and NPM installes on your machine.
• Run folowing commands

npm install
npm run build
npm run demo

• Open http://127.0.0.1:8081/ for the docs and demo page

Basic Usage

In you app js file

import Tabs from './tabs.controller.js';
import Tab from './tab.controller.js';

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

html template

<slp-tabs id="myid">
    <slp-tab title="myTabTitle1">
        content1
    </slp-tab>
    <slp-tab title="myTabTitle2">
        content2
    </slp-tab>
</slp-tabs>