
Ionic Circular Menu
Sass based Animated and Fully dynamic circular Menu
$0.00
Details
- Version:
- 1.0
- Ionic:
- 1.x
- Platforms:
- iOS, Android
- Released:
- 4 years ago
- Updated:
- 4 years ago
- Category:
- Plugins
- Tags:
- ,
ionic-circular-menu
Sass based Animated and Fully dynamic circular Menu.
Features
- Multiple Submenus
- Mange the click events of submenus
- Dynamic ionic icons and/or images
Usage
Get the files from github or install from bower:
``` bower install ionic-circular-menu
```
Include circular-menu.js
in your index.html:
```
menu.scss
and ionic-icon.scss
in your ionic.app.scss:
@import "www/lib/ionic-circular-menu/src/scss/menu"
@import "www/lib/ionic-circular-menu/src/scss/ionic-icon"
ionic-circular-menu
to your application dependencies in your app.js:
angular.module('starter', ['ionic', 'starter.controllers','ionic-circular-menu'])
Directives
circular-menu
This directive will transform the element into a circucar menu . By clicking the main humbargar icon sub items of circular menu will be opened . You can also handle the click of sub items. For this to work the following conditions must apply:
- The element you use this directive must be clickable.
- The directive requires an inner attribute "menuHander" to be set on the element to manage the submenus click events.
- The directive expects an inner attribute "config" to define the basic configuration .
- If image will be present icon tag does not show ,otherwise icon will be load by default .
Add the below directive to your template file.
```
```
Config
- status: Menu open or close status [true/false]
- submenus: Submenu objects separated by comma for sub items . e.g
submenus:[ {menuicon:'icon ion-social-twitter',img:'img/twitter.png'}, {menuicon:'icon ion-social-facebook',img:'img/facebook.png'}]
Example of config and event override of menu and submenu in controller.
In img to assign image file path otherwise ionic icon load by default
$scope.circularMenuConfig ={
status:true,
submenus:[
{menuicon:'icon ion-social-twitter',img:''},
{menuicon:'icon ion-social-facebook',img:''},
{menuicon:'icon ion-social-googleplus',img:''},
{menuicon:'icon ion-social-github',img:''}, {menuicon:'icon ion-social-whatsapp-outline',img:''}, {menuicon:'icon ion-social-buffer-outline',img:''}, {menuicon:'icon ion-social-windows',img:''}, {menuicon:'icon ion-social-html5',img:''}
]
}
$scope.menuHander = function(subMenuindex){
switch(subMenuindex){
case 1: console.log('twitter'); break;
case 2: console.log('facebook');break;
case 2: console.log('googleplus');break;
case 4: console.log('github');break;
case 5: console.log('whatsapp');break;
case 6: console.log('buffer');break;
case 7: console.log('window');break;
case 8: console.log('html');break;
default : break;
}
}
```
}
Questions?
If you have any query then please contact [email protected] or report it on the Github.
```