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.