Modern Tabbing System In Vanilla JavaScript – Tabby

Category: Javascript | January 19, 2019
Author: janmarkuslanger
Views Total: 482 views
Official Page: Go to website
Last Update: January 19, 2019
License: MIT

Preview:

Modern Tabbing System In Vanilla JavaScript – Tabby

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

You Might Be Interested In:


Leave a Reply