Tabs module for es6

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

if you need es5 support use tabs.es5.js version

use browserify with babelify extension

there's also gulp version

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

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

Lazy Load

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

Simple usage

import initTabs from 'future-tabs';
initTabs('.tabs');

or

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

Extended usage

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

or

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

Destroy

const tabs = new Tabs(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>
	var module = {exports: {}};
	var exports = 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