Skip to content

dderg/tabs

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Tabs module for es6

npm download count Current tag Current tag Issues closed Dependency Status Reference Status

Requirements

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