Kis-tabs NPM | npm.io

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

tabs

@infinitebrahmanuniverse/nolb-kis @everything-registry/sub-chunk-2017 @zalastax/nolb-kis

1.0.1

3 years ago

1.0.0

4 years ago