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

<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