Back to Tabs-guidelines

JavaScriptThe latest version of this package is: 0.18.6, Opens in new window

JavaScript library for the Tabs Component

This component is compatible with ESM (ES6 module) and IIFE. See documentation examples below.

To be able to install this component, please refer to the Project Setup documentation.

View repository, Opens in new windowView package, Opens in new window
$ npm i @ids-js/tabs@0.18.6
Name Age Position
John Wicker 38 Hitman
John Wicker 38 Hitman
John Wicker 32 Hitman
Expandable 38 Hitman
John Wicker 38 Hitman

Table of Contents

Features

  • Makes the Tab component usable
  • User can navigate tabs with arrow keys
  • Full accessible compliance

Usage

Install

  $ npm i @ids-js/tabs

Required markup

<div class="if tabs">
  <ul class="if" role="tablist">
    <li class="if" role="presentation">
      <a class="if" href="#<unique-id-for-section>-1" id="<unique-id-for-title>-1" role="tab" aria-selected="true"
        >Tab title</a
      >
    </li>
    <li class="if" role="presentation">
      <a class="if" href="#<unique-id-for-section>-2" id="<unique-id-for-title>-2" role="tab" tabindex="-1"
        >Tab title</a
      >
    </li>
  </ul>
  <section
    aria-labelledby="<unique-id-for-title>-1"
    id="<unique-id-for-section>-1"
    class="if tab-panel"
    role="tabpanel"
    tabindex="-1"
  >
    …
  </section>
  <section
    aria-labelledby="<unique-id-for-title>-2"
    id="<unique-id-for-section>-2"
    class="if tab-panel"
    role="tabpanel"
    tabindex="-1"
    hidden=""
  >
    …
  </section>
</div>

You preferrably want to wrap it in a block and a container:

<div class="if block">
  <div class="if container">…</div>
</div>

Initialize one set of tabs

import idsInitTabs from '@ids-js/tabs';
import { debounce } from '@ids-js/utils';

const tabElement = document.querySelector('.if.tabs');

if (document.readyState === 'loading') {
  document.removeEventListener('DOMContentLoaded', () => {
    idsInitTabs(tabElement);
  });
  document.addEventListener('DOMContentLoaded', () => {
    idsInitTabs(tabElement);
  });
} else {
  idsInitTabs(tabElement);
}
const initTabs = debounce(function () {
  idsInitTabs(tabElement);
}, 300);

window.removeEventListener('resize', () => {
  idsInitTabs(tabElement);
});
window.addEventListener('resize', () => {
  idsInitTabs(tabElement);
});

Initialize several tabs

This will initialize all the tabs in the current DOM.

import idsInitTabs from '@ids-js/tabs';
import { debounce } from '@ids-js/utils';

const init = () => {
  const _tab_els = document.querySelectorAll('.if.tabs');

  _tab_els.forEach(idsInitTabs);
};

if (document.readyState === 'loading') {
  document.removeEventListener('DOMContentLoaded', init);
  document.addEventListener('DOMContentLoaded', init);
} else {
  init();
}
const initTabs = debounce(function () {
  init();
}, 300);

window.removeEventListener('resize', initTabs);
window.addEventListener('resize', initTabs);

Api

idsTabs(el)

Initializes the Tabs Component with the given arguments.

Param Type Description
el HTMLElement The Tab DOM Element

el : HTMLElement

The Tab DOM Element:

<div class="if tabs">
  <ul class="if" role="tablist">
    <li class="if" role="presentation">
      <a class="if" href="#<unique-id-for-section>-1" id="<unique-id-for-title>-1" role="tab" aria-selected="true"
        >Tab title</a
      >
    </li>
    <li class="if" role="presentation">
      <a class="if" href="#<unique-id-for-section>-2" id="<unique-id-for-title>-2" role="tab" tabindex="-1"
        >Tab title</a
      >
    </li>
  </ul>
  <section
    aria-labelledby="<unique-id-for-title>-1"
    id="<unique-id-for-section>-1"
    class="if tab-panel"
    role="tabpanel"
    tabindex="-1"
  >
    …
  </section>
  <section
    aria-labelledby="<unique-id-for-title>-2"
    id="<unique-id-for-section>-2"
    class="if tab-panel"
    role="tabpanel"
    tabindex="-1"
    hidden=""
  >
    …
  </section>
</div>

Changelog

Change Log

All notable changes to this project will be documented in this file. See Conventional Commits for commit guidelines.

0.17.0 (2021-10-21)

Code Refactoring

  • 💡 Remove support for CommonJS (9f84d9a)

BREAKING CHANGES

  • 🧨 We have removed the support for CommonJS for all @ids-js packages

0.16.1 (2021-10-21)

Bug Fixes

  • Use common for cjs and main for esm (96f673d)

0.8.0 (2021-09-23)

Features

  • 🎸 Add bundle for the js (faf1516)
Contact us, Opens in new window