sifrr-tab-container

sifrr-tab-container

• Load sifrr-tab-container element in your sifrr webapp
• Add tag to HTML

<sifrr-tab-container options="<JSON String>">
  <div>
    Tab 1
  </div>
  <div>
    Tab 2
  </div>
</sifrr-tab-container>

Options

// Default options
{
  num: 1, // number of tabs in view at once
  animation: 'ease', // type of animation for tabs changing
  animationTime: 300, // time in ms for animation
  scrollBreakpoint: 0.3, // breakpoint for scroll, when tab should be changed
  loop: false // loop on next/prev/active or not
}

API

const tabs = document.querySelector('sifrr-tab-container');

Next tab

tabs.next();

previous tab

tabs.prev();

Jump n tabs

tabs.active += 2;
tabs.active += tabs.options.num;

Jump to tab 1

tabs.active = 0; // tabs index start from 0

Check if there are tabs after active tab

tabs.hasNext(); // always returns true if loop = true

Check if there are tabs before active tab

tabs.hasPrev(); // always returns true if loop = true

On scroll event

tabs.onScrollPercent = (percent) => {
  // percent = scroll left position / width of 1 tab
};

Event listeners

tabs.querySelector('div').onActive = () => {
  // load posts or something when first div becomes active
}
tabs.querySelector('div').onInactive = () => {
  // do something when first div becomes inactive
}