js-tabs

v1.0.1

Published

2 years ago

Transforms tabs markup to a simple but beautiful tabs system

Downloads

399

0High
0Medium
0Low

liranh85

tab tabs tabbable

JS Tabs

Transforms tabs markup to a simple but beautiful tabs system: showing the corresponding content when clicking on a tab.

Live example

http://www.liran.co.uk/js-tabs

Features

Supports multiple JS Tabs components on one page
Supports nesting JS Tabs inside one another
Has a tab marker out of the box, which also:
- is animated
- changes color based on the color of each tab
- resizes on window resize
Exposes a destroy method to remove all js-tabs event listeners

Installation

npm install js-tabs

Usage

HTML

<div id="my-js-tabs">
  <nav class="js-tabs__nav">
    <ul class="js-tabs__tabs-container">
      <li class="js-tabs__tab active">Tab 1</li>
      <li class="js-tabs__tab">Tab 2</li>
      <li class="js-tabs__tab">Tab 3</li>
      <li class="js-tabs__tab">Tab 4</li>
    </ul>
    <div class="js-tabs__marker"></div>
  </nav>

  <ul class="js-tabs__content-container">
    <li class="js-tabs__content active">
      <p>Content 1</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 2</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 3</p>
    </li>
    <li class="js-tabs__content">
      <p>Content 4</p>
    </li>
  </ul>
</div>

JS

import JsTabs from 'js-tabs'

const myTabs = new JsTabs({
  elm: '#my-js-tabs'
})
myTabs.init()

SCSS

Requires _js-tabs-base.scss to work properly.

@import '~js-tabs/src/js-tabs-base';

Usage - ES5 and CSS

<head>
  <!-- ... -->
  <link rel="stylesheet" href="js-tabs/_js-tabs-base.css">
  <script src="js-tabs/index.js"></script>
</head>
<body>
  <!-- ... -->
  <script>
    var myTabs = new JsTabs.default({
      elm: '#my-js-tabs'
    })
    myTabs.init()
  </script>
</body>

Parameters

JsTabs takes an object with the following properties:

{
  elm,
  onClickHandlerComplete,
  shouldScrollTabIntoView
}

`elm`

[Element/String, required] The root element of the JS Tabs in the DOM. Can be either a reference to the element or a string representing a selector for the element.

`onClickHandlerComplete`

[Callback function, optional] If passed, will be called after the tab has changed.

`shouldScrollTabIntoView`

[Boolean, optional, default: true] Whether on not to scroll towards the tab when clicked (useful in small displays in which the tabs might not all fit on the screen)

Public methods

`init()`

Initialises the JS Tabs instance for the element specified

`destory()`

Removes all event listeners of the JS Tabs instance

CSS classes used

js-tabs__nav
js-tabs__tab
js-tabs__content-container
js-tabs__content
js-tabs__marker
js-tabs__no-marker (see below)
active

Removing the marker

If you want to implement the marker differently, you can remove the existing one like so:

...
<nav class="js-tabs__nav">
- <ul class="js-tabs__tabs-container">
+ <ul class="js-tabs__tabs-container js-tabs__no-marker">
    <li class="js-tabs__tab active">Tab 1</li>
    <li class="js-tabs__tab">Tab 2</li>
    <li class="js-tabs__tab">Tab 3</li>
    <li class="js-tabs__tab">Tab 4</li>
  </ul>
- <div class="js-tabs__marker"></div>
</nav>
...

Dependencies

None

Contributing

Feel free to submit issues and pull requests

Development

Run the following, which will serve the JS Tabs example on localhost:8081 and watch for changes.

npm start

Navigate to http://localhost:8081/example/ to view the output
Test the library in src/example:
- index.html
- index.js
- _js-tabs-custom.scss
Edit the library itself in src:
- index.js
- _js-tabs-base.scss

License

This project is licensed under the MIT License - see the LICENSE file for details