Modern Tabbing System In Vanilla JavaScript – Tabby

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:

11/18/2018

• v2.0.2