A component set and context class for organizing the Tabs interface

• no dependencies
• no inline styles
• set of predefined components <Tabs />, <Tab /> and <Panel />.
• context class for toggling component states

Docs & Demo • API

Install

NPM

npm i -D @apsc/tabs

PNPM

pnpm add -D @apsc/tabs

Usage

This is the root component. It's a container of the Tab and Panel components. The basic structure of components is:

<Tabs>
  <div> <!‐‐ optional wrapper ‐‐>
    <Tab>A</Tab>
    <Tab>B</Tab>
  </div>
  <div> <!‐‐ optional wrapper ‐‐>
    <TabPanel>A</TabPanel>
    <TabPanel>B</TabPanel>
  </div>
</Tabs>

But what you really need to do is fill the slots with useful items such as these:

<Tabs>
  <Tab let:active let:activate>
    <button class:active on:click={activate}>
      A
    </button>
  </Tab>
  <Tab let:active let:activate>
    <button class:active on:click={activate}>
      B
    </button>
  </Tab>
  <TabPanel let:active>
    <div style:display={active ? 'block' : 'none'}>Content of A</div>
  </TabPanel>
  <TabPanel let:active>
    <div style:display={active ? 'block' : 'none'}>Content of B</div>
  </TabPanel>
</Tabs>

Important!

The Tab and Panel components are added to the end of the list during rendering. To keep the correct component order, reassign the entire tab list or use the {#keys} or {#each key}.

Context class

Under the hood, the component uses a TabContext of this type:

class TabsContext {
  readonly active: Readable<ContextActive>;
  readonly length: Readable<number>;
  static readonly contextName: symbol;
  push(entity: 'tab' | 'panel'): symbol;
  pop(entity: { tab: symbol } | { panel: symbol }): boolean;
  select(entity: number | { tab: symbol } | { panel: symbol }): boolean;
}

interface ContextActive {
  index: number;
  tab?: symbol;
  panel?: symbol;
}

You can access the context with the code getContext(TabsContext.contextName). You can also extend the class if there is a lack of functionality.