Bhavin Patel

Angular, PWA, C#, ASP.NET, Node.js, Docker, React, IONIC, IoT & more …

Angular FAB Button like google apps


I am working on IONIC based android hybrid app recently and I come across this really nice angular js plugin “Ng-Material-Floating-Button” from nobitagit.

I have used this plugin in my multiple projects and it’s pretty well working. I have also created plunker for anyone wants to test it or refer it.

my plnkr: http://plnkr.co/edit/rg6Tqp?p=preview

Plugin Download and Documentation: https://github.com/nobitagit/ng-material-floating-button/

Version 2 :  If you really like to color each button. use my new forked version from below github

https://github.com/bapatel1/ng-material-floating-button

image

Updated Plunker : http://plnkr.co/edit/Dinswg?p=preview

Version 3: If you want google inbox styled, small child buttons, please refer “mfb-smallchild.css” from my github location mentioned above.

It will look like –

image

Hope this will help other developers … Smile Happy Coding…!!

More Posts

2 responses to “Angular FAB Button like google apps”

  1. Etee Avatar
    Etee

    How to add backdrop on click of the fab button. Backdrop is added but FAB menu hides behind backdrop.

    Like

    Reply
    1. Bhavin Patel Avatar
      Bhavin Patel

      @Etee i developed it for my flat theme without any backdrop so never tried to set it up but i can look for other contributors on my github for this solution. We are using angular2 now so i might have component for ng2.

      Like

      Reply

Leave a comment