Package Exports

scroll-tabs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (scroll-tabs) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

scroll-tabs

This component adds the functionality to scroll over a list of tabs.

ScrollTabs adds scroll buttons on the left and right side of the tabs container if not all tabs are visible. It also adds a mouse wheel listener on the container.

If either a button is clicked or the mouse wheel is used over the tabs, a 'scroll' event is being fired. This event contains the node elements of the new and old active tab, and the direction in which the tab has changed relative to the old active tab.

scrollTabs screenshot

How to use

Provide a tab container

var $el = (
  <div>
    <ul class="my-tabs-container">
      <li class="my-tab i-am-active"></li>
      <li class="my-tab"></li>
      <li class="my-tab ignore-me"></li>
    </ul>
  </div>
);

Initialize scrollTabs

var scroller = scrollTabs($el, {
  selectors: {
    tabsContainer: '.my-tabs-container',
    tab: '.my-tab',
    ignore: '.ignore-me',
    active: '.i-am-active'
  }
});

Listen to the scroll event

scroller.on('scroll', function(newActiveNode, oldActiveNode, direction) {
  // activate the new active tab
});

Update scroller

Every time tabs change and or the tab container resizes, update the scroller:

scroller.update();

How to test

npm run test

License

MIT