ionic-circular-popup-menu/README.md

Ionic directive that opens a menu with fabs arranged in a circular fashion

# Ionic-Circular-Popup-Menu directive (Ionic 2)

Ionic-Circular-Popup-Menu directive (Ionic 2)
Ionic directive that opens a menu with fabs arranged in a circular fashion

# Demo

https://luiskcs89.github.io/ionic-circular-popup-menu/demo/

# Usage

Install: `npm install ionic-circular-popup-menu --save`

Import the ionic-circular-popup-menu module:

```
import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app/app.component';
import { CircularPopupMenuModule } from "ionic-circular-popup-menu";


@NgModule({
    declarations: [
        MyApp
    ],
    imports: [
        CircularPopupMenuModule,
        IonicModule.forRoot(MyApp)
    ],
    bootstrap: [IonicApp],
    entryComponents: [
        MyApp
    ]
})
export class AppModule {}
```

Add the directive to a tag of the page, like a button

```
<button ion-button circular-popup-menu [buttonDetails]="this.buttons">Open Menu</button>
```

Add the button details on your page component

```
import { ButtonDetails } from 'ionic-circular-popup-menu';
      
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  buttons: ButtonDetails[];

  constructor() { 
    this.buttons = [
      {label: "Add", icon: "add", color: "primary", onclick: function() {console.log("Add")}},
      {label: "Close", icon: "close", color: "primary", onclick: function() {console.log("Close")}},
      {label: "Approve", icon: "checkmark", color: "primary", onclick: function() {console.log("Approve")}},
      {label: "Upload", icon: "cloud-upload", color: "primary", onclick: function() {console.log("Upload")}},
      {label: "Download", icon: "cloud-download", color: "primary", onclick: function() {console.log("Download")}},
      {label: "Flag", icon: "flag", color: "primary", onclick: function() {console.log("Flag")}}
    ]
  }
}
```

# Note

This menu only accepts 1 to 12 elements, anyway it doesn't fit more than 12 buttons


# Options for ButtonDetails

* label    
Label to show under the button.
* color    
Color value for the fab button.
* onclick    
Callback to run when the button is pressed.