Patrick
Is it possible to center these buttons with this plugin?
Material UI-like Floating Action Button and Menu
Material UI-like Floating Action Button and Menu for Ionic applications
bower install ion-floating-menu
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>
Add ion-floating-menu
as a module dependency of your angular module.
angular.module('MyApp', ['ionic', 'ion-floating-menu'])
...
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.
#2AC9AA
by default)ion-plus
by default; note that the icon
class is already defined)#fff
by default) false
by default)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.
ion-floating-menu:
#2AC9AA
by default)ion-plus
by default; note that the icon
class is already defined)#fff
by default) #2AC9AA
by default)ion-minus
by default; note that the icon
class is already defined)#fff
by default) false
by default)ion-floating-item:
#2AC9AA
by default)#fff
by default) 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.
Is it possible to center these buttons with this plugin?
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!
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>
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
Great! Bookmarked!
nice plugin i have a question ho can i use to call the link not function for example click="#/app/map">
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.
Thanks for sharing man.
Thanks for sharing man.
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.
nice plugin i have a question ho can i use to call the link not function for example click="#/app/map">
Great! Bookmarked!
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
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>
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!
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.
Nice job !
Great!!!
Works perfectly. Thank you
Excellent work! :D
Great
Nice Work!!!
NIce work
very helpful plugin !!
very helpful plugin !!
very helpful plugin !!
great work!
great..
{{ rating.comment }}
{{ rating.comment }}
great..
great work!
very helpful plugin !!
very helpful plugin !!
very helpful plugin !!
Great!!!
Nice Work!!!
Great
Excellent work! :D
Works perfectly. Thank you
Nice job !
NIce work