Skip to content

Latest commit

 

History

History
177 lines (138 loc) · 3.69 KB

README.md

File metadata and controls

177 lines (138 loc) · 3.69 KB

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