Author: | janmarkuslanger |
---|---|
Views Total: | 638 views |
Official Page: | Go to website |
Last Update: | January 19, 2019 |
License: | MIT |
Preview:

Description:
Tabby is an ultra-light, pretty simple tabbing system written in pure vanilla JavaScript (ES6).
Comes with lots of callback functions which enables you to do some cool stuff when switching between tabs.
How to use it:
Insert the compiled version of the Tabby library into the document.
<link rel="stylesheet" href="dist/tabby.css"> <script src="dist/tabby.js"></script>
Create the tabs & tabbed content using the following data
attributes:
- data-tabby-bar: unique name.
- data-tabby-content: must match the
data-tabby-bar
attribute. - data-tabby-active: active tab
<div class="tabs"> <div class="bar"> <div data-tabby-bar="1" data-tabby-active>Tab 1</div> <div data-tabby-bar="car">Tab 2</div> <div data-tabby-bar="3">Tab 3</div> </div> <div class="content"> <div data-tabby-content="1" data-tabby-active>Tab 1 Content</div> <div data-tabby-content="demo">Tab 2 Content</div> <div data-tabby-content="3">Tab 3 Content</div> </div> </div>
Initialize the Tabby.
const myTab = new Tabby.Component(document.querySelector('.tabs'));
Apply custom styles to the tabs.
.tabs { width: 100%; max-width: 400px; margin: 0 auto; border-radius: .25rem; overflow: hidden; background-color: rgba(0, 0, 0, .1); } .tabs .bar { width: 100%; display: flex; } .tabs [data-tabby-bar]:first-child { border-left: none; } .tabs [data-tabby-bar] { padding: 1.25rem; text-align: center; cursor: pointer; border-left: .0625rem solid rgba(0, 0, 0, .4); flex: 1; background-color: rgba(0, 0, 0, .3); } .tabs [data-tabby-content] { padding: 1.25rem; }
All possible callback functions.
const myTab = new Tabby.Component(document.querySelector('.tabs'),{ onConstruct: function(tab) { // do something }, onBeforeKilltabs: function(tab, activeBarElement, activeContentElement) { // do something }, onAfterKilltabs: function(tab, activeBarElement, activeContentElement) { // do something }, onBeforeShowtab: function(tab, activeBarElement, activeContentElement) { // do something }, onAfterShowtabs: function(tab, activeBarElement, activeContentElement) { // do something }, onBeforeInit: function(tab) { // do something }, onAfterInit: function(tab) { // do something } });
Changelog:
01/19/2019
- v3.0.0 beta