Ionic Speed Dial

Ionic Speed Dial

Sass based Animated and Fully dynamic Fly Menus

$0.00

ost.agency

ost.agency

Member since 2015

Details

Version:
1.0.0
Ionic:
1.x  
Platforms:
iOS, Android  
Released:
5 years ago
Updated:
3 years ago
Category:
Plugins
Tags:
,

ionic-speed-dial

Sass based Animated and Fully dynamic Fly Menus.

Features

  • Multiple Submenus
  • Mange the click events of submenus
  • Dynamic ionic icons

Usage

Get the files from github or install from bower:

``` bower install ionic-speed-dial

```

Include speed-dial.js in your index.html:

```

```

Include speed-dial.scss in your ionic.app.scss:

@import "www/lib/ionic-speed-dial/src/scss/speed-dial"

Add the module ionic-speed-dial to your application dependencies in your app.js:

angular.module('starter', ['ionic', 'ionic-speed-dial'])

And you're ready to go.

Directives

speed-dial

This directive will transform the element into a fly or floating menu . By clicking the main fly icon sub items of fly 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 "funhandler" to be set on the element to manage the submenus click events.
  • The directive expects an inner attribute "config" to define the basic configuration .

Add the below directive to your template file.

```

```

Config

  • status: Menu open or close status [true/false]
  • menuImage: Icon name for main floating icon . e.g. ion-plus
  • menuBackground: Background color for main floating icon . e.g. #ff1744
  • menuColor: Icon color for main floating icon . e.g. #ffffff
  • subMenuBackground: Default Background color for submenus floating icon . e.g. #ff1744
  • submenus: Submenu objects separated by comma for sub items . e.gsubmenus:[{icon:'ion-bag',background :'#d500f9',color:''},{icon:'ion-map',background :'#64ffda',color:'#000000'}]

Example of config and event override of menu and submenu in controller.

``` $scope.speedDialConfig ={ status:true, menuImage:'ion-plus', menuBackground :'#ff1744', menuColor:'#ffffff', subMenuBackground : '#ff1744', submenus:[{icon:'ion-bag',background :'#d500f9',color:''},{icon:'ion-map',background :'#64ffda',color:'#000000'}] } $scope.speedHander = function(subMenuindex){ switch(subMenuindex){ case 1: console.log('submenu1');break; case 2: console.log('submenu2');break; default : break; } }

```

Questions?

If you have any query then please contact [email protected] or report it on the Github. Open Source Technologies