Content one
Content two
https://github.com/janmarkuslanger/tabby
📂 Super simple vanillaJS tabswitcher plugin! ~2kb
https://github.com/janmarkuslanger/tabby
tabby tabs tabswitcher vanilla-javascript vanilla-js
Last synced: 3 months ago
JSON representation
📂 Super simple vanillaJS tabswitcher plugin! ~2kb
- Host: GitHub
- URL: https://github.com/janmarkuslanger/tabby
- Owner: janmarkuslanger
- Created: 2018-04-21T10:20:09.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2022-03-08T11:50:21.000Z (about 3 years ago)
- Last Synced: 2025-02-10T04:36:04.187Z (3 months ago)
- Topics: tabby, tabs, tabswitcher, vanilla-javascript, vanilla-js
- Language: HTML
- Homepage: https://janmarkuslanger.github.io/tabby/
- Size: 475 KB
- Stars: 26
- Watchers: 2
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Tabby
Lightweight and simple Vanilla JS Tab Switcher Plugin
## Why tabby?
- Easy to install
- Entirely access to the tabby class
- Nested instances
- Small in size
- Fade animation out of the box
---
## Install
### npm
``` npm
$ npm i tabsjs-lib
```
``` javascript
const Tabby = require('tabsjs-lib');
Tabby.init();
```
### script
Install tabby is quite simple. Create simple markup and include the script. Then you are ready to go!
### Markup
Tabby works with data attributes, so we need to use three different data attributes here.
attribute |Â description
----------|-----------
data-tabby |Â the container wraps your tabs
data-tabby-bar | bar that needs a value which links to the content
data-tabby-content | content part that needs a value which links to the bar
Here is a straightforward markup
The bar and content elements needs to be siblings
``` html
Tabby.init();
```
## Tabby
#### Tabby.init **function**
This method will initialize the tab components in the dom and will create an instance of the tabby class
for each `[data-tabby]` element. It will return the objects in an array.
#### Tabby.Tabby **class**
Our base class, `Tabby`. Here you can create the instance by yourself.
#### Tabby.version **string**
Return the currenty used version number
## Methods
When you have created a few instances, you can use some methods on them.
``` javascript
// myTaby is an array which contains the objects
const myTabs = Tabby.init();
// lets just pick the first one
const myFirstTab = myTabs[0];
// now we can use the methods on them
```
#### Methods next()
Switches to the next element.
``` javascript
myFirstTab.next();
```
#### Methods previous()
Switches to the previous element.
``` javascript
myFirstTab.previous();
```
## Demo
## Questions
For questions and support feel free to create an issue or write an email to
[email protected]
## Issues
If you found a bug, then please create an issue. It will help me a lot to make my work better. :)
## Contribution
Pull requests are always welcome. I am always happy to see others working on
my GitHub projects.
## Get in touch
Write an email to [email protected] :)