Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: 1 day 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 (10 days 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.