https://github.com/dev-javascript/tabs-more-button
Responsive Tabs with more button
https://github.com/dev-javascript/tabs-more-button
Last synced: 10 months ago
JSON representation
Responsive Tabs with more button
- Host: GitHub
- URL: https://github.com/dev-javascript/tabs-more-button
- Owner: dev-javascript
- Created: 2024-04-30T12:41:51.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2024-04-30T12:41:52.000Z (over 1 year ago)
- Last Synced: 2024-05-02T08:10:10.923Z (over 1 year ago)
- Size: 0 Bytes
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# tabs-more-button
[](https://codecov.io/gh/dev-javascript/tabs-more-button) [](http://npmjs.org/package/tabs-more-button) [](LICENSE) [](https://npmjs.org/package/tabs-more-button) [](https://travis-ci.org/ly-components/tabs-more-button)
`tabs-more-button` is a lightweight library designed to enhance your tabbed interfaces by making them responsive. This package does not create or manage tabs, but it intelligently hides overflow tabs while ensuring that the active tab remains visible. Ideal for scenarios where space is limited
## Features
- Responsive
- `Vertical` support
- `rtl` support
- Flexible style
- High performance
## Installation
> $ 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 :
```js
```
## Minimal Usage
html :
```html
- Tab 0
- Tab 1
- Tab 2
- Tab 3
- Active Tab 4
- Tab 5
- Tab 6
more
```
js :
```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));
```
## Rules
- `view more` button is required to display the hidden tabs and should be next sibling element of `Tablist` element
- `tabs` and `view more` button should be kept on same line
- Should not be any gap between `view more` button and `Tablist`
## options
- buttonElement
- type : `HtmlELement`
- description : `view more` button
- containerElement
- type : `HtmlELement`
- description : parent element of `view more` button and `Tablist` element
- tablistElement
- type : `HtmlELement`
- description : the `Tablist` element
- tabDisplay?
- type : `string`
- description : `display` value for each `tab` element
- default value : `inline-flex`
- containerDisplay?
- type : `"flex"`|`"block"`
- description : `display` value for `containerElement`
- default value : `flex`
## instance methods
- resize
- type : `function`
- description : makes tabs responsive by hiding `overflow tabs` except `active tab`
- arguments :
- selectedTabIndex :
- type : `Number`
- description : index of active tab element in the tablist element
- direction? :
- type : `"ltr" | "rtl"`
- description : direction value of `tablist` element
- default value : `"ltr"`
- isVertical? :
- type : `Boolean`
- description : `true` means `tablist` element is vertical
- default value : `false`
- return :
- type : `Array<{ el: HTMLElement, index: Number }>`
- description : array of hidden tabs data
## Test
> $ npm run test
## License
MIT