tab-manager v1.0.11
Installation
To install tab-manager globally on your computer just open terminal and run:
$ npm install tab-manager
To install it in a directory (recommended) run:
$ npm install --save tab-manager
How to use
The basics
Inside the html
To create a button for a tab just use an element with the class "tabbutton" like so:
<button class="tabbutton">Tab 1</button>
<button class="tabbutton">Tab 2</button>
To create the tab itself just use an element with the class "tabscreen" like so:
<div class="tabscreen">This is tab 1!</div>
<div class="tabscreen">This is tab 2!</div>
Finally to link a button to a tab you can give them an attribute "screen" with the same value.
The final result:
<button class="tabbutton" screen="first">Tab 1</button>
<button class="tabbutton" screen="second">Tab 2</button>
<div class="tabscreen" screen="first">This is tab 1!</div>
<div class="tabscreen" screen="second">This is tab 2!</div>
Inside the JavaScript
This is the easiest just connect a Javascript file to your html file or use the "script" tag.
Inside the JavaScript just require "tab-manager" and let it watch like this:
var tabManager = require("tab-manager");
tabManager.watch();
Done!
Further features
You can set a default tab that should be open when the page loads by giving the button the class "selected":
<button class="tabbutton selected" screen="first">Tab 1</button>
! If this is not given all tabs will be hidden until a tab button is clicked !
You can create a different style for tab-buttons when the tabs are open. tab-manager automatically gives a tab-button the class "selected" when the tab is open so it is easy to style in css:
.tabbutton.selected {
text-decoration: underline;
}