/ion-floating-menu

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

Primary LanguageJavaScriptMIT LicenseMIT

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):

<link href="lib/ion-floating-menu/dist/ion-floating-menu.css" rel="stylesheet" type="text/css"/>
    ...
<script src="lib/ion-floating-menu/dist/ion-floating-menu.js" type="text/javascript"></script>

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

Alt ion-floating-button

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

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

<ion-floating-button click="myEvent()" has-footer="false" button-color="#2AC9AA" icon="ion-plus" iconColor="#fff">
</ion-floating-button>

<ion-content>
    ...

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

Config

  • click: event expression
  • button-color: CSS Color for the button (#2AC9AA by default)
  • button-class: CSS Class to apply your style to the button (alternative to button-color)
  • 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)
  • bottom: CSS value in pixel to change the distance from the bottom, e.g. 40px.
  • left: CSS value in pixel to change the distance from the left, e.g. 40px. If left is defined, right does not apply
  • right: CSS value in pixel to change the distance from the right, e.g. 40px. If left is defined, left does not apply

Usage: ion-floating-menu

Alt ion-floating-menu Alt 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)
  • bottom: CSS value in pixel to change the distance from the bottom, e.g. 40px.
  • left: CSS value in pixel to change the distance from the left, e.g. 40px. If left is defined, right does not apply
  • right: CSS value in pixel to change the distance from the right, e.g. 40px. If left is defined, left does not apply

ion-floating-item:

  • click: event expression (required)
  • icon: ionic icon (required)
  • text: if you want to attach a lable to the button
  • text-class: CSS Class for the button. Note: add !important to the CSS statements if they are not applied correctly.
  • button-color: CSS Color for the button (#2AC9AA by default)
  • button-class: CSS Class to apply your style to the button (alternative to button-color)
  • icon-color: CSS Color for the icon (#fff by default)

Questions?

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

Have fun!