https://github.com/liranh85/js-tabs
Transforms tabs markup to a simple but beautiful tabs system
https://github.com/liranh85/js-tabs
tab tabbable tabs
Last synced: over 1 year ago
JSON representation
Transforms tabs markup to a simple but beautiful tabs system
- Host: GitHub
- URL: https://github.com/liranh85/js-tabs
- Owner: liranh85
- License: mit
- Created: 2018-08-27T13:48:53.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2018-11-10T23:04:50.000Z (over 7 years ago)
- Last Synced: 2025-02-17T16:52:17.042Z (over 1 year ago)
- Topics: tab, tabbable, tabs
- Language: JavaScript
- Homepage:
- Size: 115 KB
- Stars: 3
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# JS Tabs
Transforms tabs markup to a simple but beautiful tabs system: showing the corresponding content when clicking on a tab.
## Live example
http://www.liran.co.uk/js-tabs
## Features
- Supports multiple JS Tabs components on one page
- Supports nesting JS Tabs inside one another
- Has a tab marker out of the box, which also:
- is animated
- changes color based on the color of each tab
- resizes on window resize
- Exposes a destroy method to remove all js-tabs event listeners
## Installation
```
npm install js-tabs
```
## Usage
### HTML
```html
- Tab 1
- Tab 2
- Tab 3
- Tab 4
-
Content 1
-
Content 2
-
Content 3
-
Content 4
```
### JS
```js
import JsTabs from 'js-tabs'
const myTabs = new JsTabs({
elm: '#my-js-tabs'
})
myTabs.init()
```
### SCSS
Requires `_js-tabs-base.scss` to work properly.
```scss
@import '~js-tabs/src/js-tabs-base';
```
## Usage - ES5 and CSS
```html
var myTabs = new JsTabs.default({
elm: '#my-js-tabs'
})
myTabs.init()
```
## Parameters
JsTabs takes an object with the following properties:
```js
{
elm,
onClickHandlerComplete,
shouldScrollTabIntoView
}
```
### `elm`
[Element/String, **required**] The root element of the JS Tabs in the DOM. Can be either a reference to the element or a string representing a selector for the element.
### `onClickHandlerComplete`
[Callback function, optional] If passed, will be called after the tab has changed.
### `shouldScrollTabIntoView`
[Boolean, optional, default: true] Whether on not to scroll towards the tab when clicked (useful in small displays in which the tabs might not all fit on the screen)
## Public methods
### `init()`
Initialises the JS Tabs instance for the element specified
### `destory()`
Removes all event listeners of the JS Tabs instance
## CSS classes used
- `js-tabs__nav`
- `js-tabs__tab`
- `js-tabs__content-container`
- `js-tabs__content`
- `js-tabs__marker`
- `js-tabs__no-marker` (see below)
- `active`
## Removing the marker
If you want to implement the marker differently, you can remove the existing one like so:
```diff
...
-
- Tab 1
- Tab 2
- Tab 3
- Tab 4
+
-
...
```
## Dependencies
None
## Contributing
Feel free to submit issues and pull requests
## Development
* Run the following, which will serve the JS Tabs example on localhost:8081 and watch for changes.
```
npm start
```
* Navigate to http://localhost:8081/example/ to view the output
* Test the library in `src/example`:
* index.html
* index.js
* _js-tabs-custom.scss
* Edit the library itself in `src`:
* index.js
* _js-tabs-base.scss
## License
This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details