@selfage/tabs

Install

npm install @selfage/tabs

Overview

Written in TypeScript and compiled to ES6 with inline source map & source. See @selfage/tsconfig for full compiler options. Provides generic helpers to navigator tabs.

TabSwitcher

Instead of tracking all tabs, it simply hides the tab previously shown and shows a new tab, thus a switcher.

import { TabsSwitcher } from '@selfage/tabs/switcher';

let tabA: HTMLDivElement;
let tabB: HTMLDIvElement;

let tabsSwitcher = new TabsSwitcher();
tabsSwitcher.show(/* showTab= */ () => {
  tabA.style.display = 'block';
}, /* hideTab= */ () => {
  tabA.style.display = 'none';
});
// Now tabA is shown.
tabsSwitcher.show(/* showTab= */ () => {
  tabB.style.display = 'block';
}, /* hideTab= */ () => {
  tabB.style.display = 'none';
});
// Now tabA is hidden and taB is shown.

TabNavigator

An alternative way to navigator through tabs, requiring a Tab enum that contains all possible values. Especailly useful if the same tab needs an update.

import { TabNavigator } from `@selfage/tabs/navigator`;

enum Tab {
  A = 1,
  B = 2,
  C = 3,
}

function showTab(tab?: Tab) {
  switch (tab) {
    ...
  }
}

function hideTab(tab?: Tab) {
  switch (tab) {
    ...
  }
}

function updateTab(tab?: Tab) {
  switch (tab) {
    ...
  }
}

let navigator = new TabNavigator((tab) => showTab(tab), (tab) => hideTab(tab), (tab) => updateTab(tab));
navigator.goTo(Tab.A);