kis-tabs

Pure js module for tabs.

Installation

Install package using npm install kis-tabs command.

Usage

Create an HTML markup

<div class="tabs">
  <div class="tabs__nav">
    <button class="tabs__nav-btn">Tab 1</button>
    <button class="tabs__nav-btn">Tab 2</button>
    <button class="tabs__nav-btn">Tab 3</button>
  </div>
  <ul class="tabs-inner">
    <li class="tab">
      <p>Tab 1 content</p>
    </li>
    <li class="tab">
      <p>Tab 2 content</p>
    </li>
    <li class="tab">
      <p>Tab 3 content</p>
    </li>
  </ul>
</div>

Import module

import KisTabs from 'kis-tabs';

Create tabs instance

const tabs = new KisTabs({
  tabSelector: '.tab',
  btnSelector: '.tabs__nav-btn',
});

Initialize tabs

tabs.init();

API

Properties

| Name | Type | Default | Description | |-------------------------|--------------------|----------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| | tabSelector required | string | undefined | Css selector for elements with tabs content. | | btnSelector | string | undefined | Css selector for elements used to switch between tabs. | | navSelector | string | undefined | Css selector for navigation element. If can element with selector not found this.nav will be set to first button parent. Used to insert moving background element if this hasMovingBackground sets to true | | activeClass | string | 'js--active' | Class to be added to active tab and button. | | eventType | string | 'click' | Event type will be listened at buttons. | | initialTab | number, string | 0 | Id or name of the tab will be active after tabs initialization. | | hasMovingBackground | boolean | false | If true it will init (and create if it's needed) element with movingBackgroundClass class. It's the element that will be moved to create a visual effect like there. | | movingBackgroundClass | string | 'tabs__background' | Moving background class. | | searchParameterName | string | undefined | If sets on tab change url search parameter searchParameterName will be changed to active tab name. | | tabNameAttribute | string | 'data-tab-name' | Tab element attribute with tab name. |

Methods

| Name | Return | Arguments | Description | |--------------|------------------------|-----------------------------|---------------------------------------------------------------------------------------------------| | init() | Tabs instance | - | Initialize all listeners. | | goTo(id) | Active tab HTMLElement | _id: number or string | If typeof id === 'string' makes tab with name id active. Else makes tab number id active. | | goToNext() | Active tab HTMLElement | - | Makes next tab active. | | goToPrev() | Active tab HTMLElement | - | Makes previous tab active. |

License

MIT

Copyright © 2021 kirillsakun.