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.
$ 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
Vi minder dig om, at din selvrisiko ikke er blevet betalt. Du kan indbetale beløbet via MobilePay eller via det girokort, vi har sendt dig. Du kan se bort fra denne besked, hvis du netop har betalt.
Section 12
Nullam at diam nec arcu suscipit auctor non a erat. Sed et magna semper, eleifend magna non, facilisis nisl. Proin et est et lorem dictum finibus ut nec turpis. Aenean nisi tortor, euismod a mauris a, mattis scelerisque tortor. Sed dolor risus, varius a nibh id, condimentum lacinia est. In lacinia cursus odio a aliquam. Curabitur tortor magna, laoreet ut rhoncus at, sodales consequat tellus.
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)