ion-floating-menu

ion-floating-menu

Material UI-like Floating Action Button and Menu

Free!

(12)
Download
Nicola Di Giorgio

Nicola Di Giorgio

Member since 2015

Details

Version:
1.1
Size:
0mb
Ionic:
1.0.1
Platforms:
iOS, Android, Windows Phone
Released:
8 years ago
Updated:
8 years ago
Category:
Plugins
Tags:
floating button, floating menu, material ui

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

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 (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!

Hey there! You'll need to log in before you can leave a comment here.

Patrick

Patrick   ·   8 years ago

Is it possible to center these buttons with this plugin?

Nicola Di Giorgio

Nicola Di Giorgio   ·   8 years ago

Hi Patrick, of course you can. Unfortunately it is not supported by the directive at the moment (I will open an issue on github for it). As a workaround, you can add the following css to do the trick: #floating-menu{ margin-left: auto; margin-right: auto; left: 0; right: 0; } If you are using the floating-button, just replace #floating-menu with #floating-button. Let me know if you have further questions!

william neely

william neely   ·   8 years ago

If anyone is using this and wants labels, it's in the source just not documented on the description. Use the attribute "text". <ion-floating-item icon="ion-person" click="myEvent()" text="profile"></ion-floating-item>

Juan David Nicholls

Juan David Nicholls   ·   8 years ago

Hi man, thanks for this button!! :D Is possible to add material design effect? Other question... is possible to change the icon-color dynamically? Thanks for all

Jodie

Jodie   ·   8 years ago

Great! Bookmarked!

endrit pepa

endrit pepa   ·   8 years ago

nice plugin i have a question ho can i use to call the link not function for example click="#/app/map">

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Etee

Etee   ·   8 years ago

How to add a backdrop on click of menu button, I tried adding the backdrop but buttons get hidden behind the backdrop. Even after adding z-index it does not work as expected.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nguyen Anh Minh

Nguyen Anh Minh   ·   8 years ago

Thanks for sharing man.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

  ·   just now

{{ comment.comment }}

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Nguyen Anh Minh

Nguyen Anh Minh   ·   8 years ago

Thanks for sharing man.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Etee

Etee   ·   8 years ago

How to add a backdrop on click of menu button, I tried adding the backdrop but buttons get hidden behind the backdrop. Even after adding z-index it does not work as expected.

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

endrit pepa

endrit pepa   ·   8 years ago

nice plugin i have a question ho can i use to call the link not function for example click="#/app/map">

  ·   just now

{{ reply.comment }}



Hey there! You'll need to log in before you can leave a comment here.

Jodie

Jodie   ·   8 years ago

Great! Bookmarked!

Juan David Nicholls

Juan David Nicholls   ·   8 years ago

Hi man, thanks for this button!! :D Is possible to add material design effect? Other question... is possible to change the icon-color dynamically? Thanks for all

william neely

william neely   ·   8 years ago

If anyone is using this and wants labels, it's in the source just not documented on the description. Use the attribute "text". <ion-floating-item icon="ion-person" click="myEvent()" text="profile"></ion-floating-item>

Nicola Di Giorgio

Nicola Di Giorgio   ·   8 years ago

Hi Patrick, of course you can. Unfortunately it is not supported by the directive at the moment (I will open an issue on github for it). As a workaround, you can add the following css to do the trick: #floating-menu{ margin-left: auto; margin-right: auto; left: 0; right: 0; } If you are using the floating-button, just replace #floating-menu with #floating-button. Let me know if you have further questions!

Patrick

Patrick   ·   8 years ago

Is it possible to center these buttons with this plugin?

Hey there! You'll need to log in before you can leave a rating here.

Arnaud Keiflin   ·     ·   8 years ago

Nice job !

Chika Ihejimba   ·     ·   8 years ago

Great!!!

Bobby Idogho   ·     ·   8 years ago

Works perfectly. Thank you

Juan David Nicholls   ·     ·   8 years ago

Excellent work! :D

Siwiphorn Thitimanakul   ·     ·   8 years ago

Great

Vinay Gopalaiah   ·     ·   8 years ago

Nice Work!!!

Nguyen Anh Minh   ·     ·   8 years ago

NIce work

amee   ·     ·   8 years ago

very helpful plugin !!

amee   ·     ·   8 years ago

very helpful plugin !!

amee   ·     ·   8 years ago

very helpful plugin !!

Vadym   ·     ·   7 years ago

great work!

Rishikesh Vedpathak   ·     ·   7 years ago

great..

  ·     ·   just now

{{ rating.comment }}

  ·     ·   just now

{{ rating.comment }}

Rishikesh Vedpathak    ·     ·   7 years ago

great..

Vadym    ·     ·   7 years ago

great work!

amee    ·     ·   8 years ago

very helpful plugin !!

amee    ·     ·   8 years ago

very helpful plugin !!

amee    ·     ·   8 years ago

very helpful plugin !!

Chika Ihejimba    ·     ·   8 years ago

Great!!!

Vinay Gopalaiah    ·     ·   8 years ago

Nice Work!!!

Siwiphorn Thitimanakul    ·     ·   8 years ago

Great

Juan David Nicholls    ·     ·   8 years ago

Excellent work! :D

Bobby Idogho    ·     ·   8 years ago

Works perfectly. Thank you

Arnaud Keiflin    ·     ·   8 years ago

Nice job !

Nguyen Anh Minh    ·     ·   8 years ago

NIce work