https://github.com/ErlendEllingsen/app-tab-bar

A tab-bar system in HTML/JS for hybrid apps / web apps.
https://github.com/ErlendEllingsen/app-tab-bar

Last synced: about 2 months ago
JSON representation

A tab-bar system in HTML/JS for hybrid apps / web apps.

• Host: GitHub
• URL: https://github.com/ErlendEllingsen/app-tab-bar
• Owner: ErlendEllingsen
• License: mit
• Created: 2016-10-26T11:03:18.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2017-02-03T12:07:12.000Z (almost 8 years ago)
• Last Synced: 2024-11-02T05:03:49.189Z (about 2 months ago)
• Language: JavaScript
• Homepage: https://erlendellingsen.github.io/app-tab-bar/
• Size: 43 KB
• Stars: 22
• Watchers: 2
• Forks: 3
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
![App-tab-bar](https://i.imgur.com/CLUH1Ws.png)

#app-tab-bar

A tab-bar system in HTML/JS for hybrid apps / web apps. Creates beautiful tabs in Bootstrap-style. Designed to work with Phonegap/Cordova. Created as a multi-platform-purpose system. 

##Installation 

###NPM (Recommended)

`npm install app-tab-bar`

###Bower

`bower install app-tab-bar` 

###Direct

1. Download `tabbar.js` and `tabbar.css` and reference them in your document.

2. Make sure the *dependencies* are installed (see below).

###Dependencies

*No dependencies anymore🔥*

##Usage

🌴 This is a quick usage guide. Read the [usage wiki page](https://github.com/ErlendEllingsen/app-tab-bar/wiki/Usage) for all methods, options and alternatives. 🌴

**HTML**

Add an empty div to your code with a specified id. Example:

```html



```


**Javascript**

Add your own tabbar-code to your javascript. Initialize the tabbar object and select the HTML-object you added. Add tabs and then finally render.

```javascript

//Initialize the tabbar

var tabbar = new AppTabBar.Tabbar('tab_bar');

tabbar.init();

//Add tabs

var tab_home = tabbar.addTab('Home', 'fa-home', {

	events: {

		selected: function(){

			alert('Home selected!');

		}

	}

});

var tab_pages = tabbar.addTab('Pages', 'fa-home');

	

//Render the tabbar.

tabbar.render();

//Set "home" as active.

tabbar.setActive(tab_home);

```

##Preview / Live Demo

![Tabs preview](https://i.imgur.com/kTU0fO2.png)

###Live Demo

* [Demo default style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs.html)

* [Demo custom style](https://erlendellingsen.github.io/app-tab-bar/live_demo/tabs_custom_style.html)

##Contribute

Please read the wiki in order to contribute to the project.

##License 

MIT-license. See *LICENSE*-file.