Tabs module for es6

Requirements

• if you want ES5 support you have to use babel or browserify with babelify extension

Features

• Nested tabs
• Lazy load
• No dependencies
• ES2015 support (use babel)

if you need IE9 support, it should work (i didn't test yet) with classList polyfill

simple demo

Install

npm

npm i -S future-tabs

bower

bower i -S future-tabs

Markup

group tabs with tabs block, internal structure does not matter

<divclass="tabs"><divclass="tabs__toggle tabs__toggle_active">tab 1</div><divclass="tabs__toggle">tab 2</div><divclass="tabs__tab">tab 1 content</div><divclass="tabs__tab">tab 2 content</div></div>

Lazy Load

<divclass="tabs"><divclass="tabs__toggle tabs__toggle_active">tab 1</div><divclass="tabs__toggle">tab 2</div><divclass="tabs__tab">tab 1 content</div><divclass="tabs__tab" data-src="path/to/contentToBeLoaded">preloader</div></div>

Simple usage

importinitTabsfrom'future-tabs';initTabs('.tabs');

or

initTabs({selector: '.tabs',blockClassName: 'tabs'//optional})

Extended usage

import{Tabs}from'future-tabs';consttabs=newTabs(document.querySelector('.tabs'));

or

import{Tabs}from'future-tabs';consttabsDiv=document.getElementById('someCustomId');newTabs(tabsDiv,'tabs');// 'tabs' here is _bem block class name

Destroy

consttabs=newTabs(DOMElement);tabs.destroy();

if you want to init again just do

tabs.init();

If you don't use commonjs build system (like browserify or webpack) you should add this before script

<script>varmodule={exports: {}};varexports=module.exports;</script>

Build

gulp

todo

• tests

Changelog

1.3.2

• add destroy method #5

1.3.0

• add nested tabs

1.2.1

• xhr error output to console

1.2.0

• add lazy load

1.1.0

• block class name (prefix) can be set

1.0.0

• you are welcome to use it and contribute