Responsive Tabs with more button
Making tabs responsive by hiding overflow tabs except active tab
-
Vertical
support -
rtl
support -
Flexible style
-
High performance
$ npm install tabs-more-button --save
or
$ yarn add tabs-more-button
If you need to directly include script in your html, use the following links :
<script src="https://unpkg.com/tabs-more-button@latest/dist/tabs-more-button.min.js"></script>
html :
<div id="container">
<ul id="tablist" style="display:inline-flex;">
<li>Tab 0</li>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
<li style="color:red;">Active Tab 4</li>
<li>Tab 5</li>
<li>Tab 6</li>
</ul>
<button id="view-more-button">more</button>
</div>
js :
import tabsMoreButton from 'tabs-more-button';
const options = {
buttonElement: document.getElementById('view-more-button'),
containerElement: document.getElementById('container'),
tablistElement: document.getElementById('tablist'),
};
const instance = new tabsMoreButton(options);
let hiddenTabs = instance.resize(4 /*selectedTabIndex*/);
addEventListener('resize', () => {
hiddenTabs = instance.resize(4 /*selectedTabIndex*/);
});
document.getElementById('view-more-button').addEventListener('click', () => console.table(hiddenTabs));
-
view more
button should be sibling element ofTablist
element -
tabs
andview more
button should be kept on same line -
Should not be any gap between
view more
button andTablist
-
buttonElement
- type :
HtmlELement
- description :
view more
button (should be sibling element ofTablist
element)
- type :
-
containerElement
- type :
HtmlELement
- description : the first ancestor of
view more
button which itswidth|height
is not relative toTablist
element but is relative toviewport
- type :
-
tablistElement
- type :
HtmlELement
- description : the
Tablist
element
- type :
-
tabDisplay?
- type :
string
- description :
display
value for eachtab
element - default value :
inline-flex
- type :
-
containerDisplay?
- type :
string
- description :
display
value forcontainerElement
- default value :
flex
- type :
-
resize
- type :
function
- description : makes tabs responsive by hiding
overflow tabs
exceptactive tab
- arguments :
- selectedTabIndex :
- type :
Number
- description : index of active tab element in the tablist element
- type :
- direction? :
- type :
"ltr" | "rtl"
- description : direction value of
tablist
element - default value :
"ltr"
- type :
- isVertical? :
- type :
Boolean
- description :
true
meanstablist
element is vertical - default value :
false
- type :
- selectedTabIndex :
- return :
- type :
Array<{ el: HTMLElement, index: Number }>
- description : array of hidden tabs data
- type :
- type :
$ npm run test
MIT