ion-floating-menu

ion-floating-menu

Material UI-like Floating Action Button and Menu

$0.00

Nicola Di Giorgio

Nicola Di Giorgio

Member since 2015

Details

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

ion-floating-menu

Material UI-like Floating Action Button and Menu for Ionic applications

Features

  • Button similar to the Material UI Floating Action Button
  • Menu similar to the Material UI Floating Action Button

Setup

Install

bower install ion-floating-menu

JS/CSS Imports (index.html)

Include the following file imports in your index.html (the example assumes ./lib/ion-floating-menu folder):

``` ...

```

Angular Dependency (app.js)

Add ion-floating-menu as a module dependency of your angular module.

angular.module('MyApp', ['ionic', 'ion-floating-menu']) ...

Usage: ionic-floating-button

Add the ion-floating-button directive in your template.

Important: put it before and outside the ion-content node:

```

... ```

where myEvent() is trigger when you tap or click.

Config

  • click: event expression (required)
  • button-color: CSS Color for the button (#2AC9AA by default)
  • icon: ionic icon (ion-plus by default; note that the icon class is already defined)
  • icon-color: CSS Color for the icon (#fff by default)
  • has-footer: if the template has a footer, so it fixes the position (false by default)

Usage: ion-floating-menu

Add the ion-floating-menu directive in your template.

Important put it before ion-content.

<ion-floating-menu> <ion-floating-item icon="ion-camera" click="myEvent()"></ion-floating-item> <ion-floating-item icon="ion-person" click="myEvent()"></ion-floating-item> </ion-floating-menu>

where myEvent() is trigger when you tap or click.

Config

ion-floating-menu:

  • menu-color: CSS Color for the button (#2AC9AA by default)
  • menu-icon: ionic icon (ion-plus by default; note that the icon class is already defined)
  • menu-icon-color: CSS Color for the icon (#fff by default)
  • menu-open-color: CSS Color for the button (#2AC9AA by default)
  • menu-open-icon: ionic icon (ion-minus by default; note that the icon class is already defined)
  • menu-open-icon-color: CSS Color for the icon (#fff by default)
  • has-footer: if the template has a footer, so it fixes the position (false by default)

ion-floating-item:

  • click: event expression (required)
  • icon: ionic icon (required)
  • button-color: CSS Color for the button (#2AC9AA by default)
  • icon-color: CSS Color for the icon (#fff by default)

Questions?

If you have any question or remark, you can either:

Have fun!