Standalone Angularjs directive for Material floating action buttons.
Shamelessly Openly inspired by Google Inbox, Evernote and Path.

It works out of the box with no other dependencies apart from Angular, but plays nicely with Angular Material (see this other demo).

This page shows the integration with Angular Material, but the core has no hard dependency apart from Angular and works out of the box (see core demo).

Click on the yellow button here above for a code preview or choose an effect from the dropdown below and hover over the button on the corner of the screen.

Clone the project with:

git clone https://github.com/nobitagit/ng-material-floating-button.git

Or just use bower

bower install ng-mfb --save

After referencing the styles in your header drop the MFB markup in your HTML like so:

<nav mfb-menu position="{{pos}}" effect="{{chosenEffect}}"
    label="your main button text here"
    active-icon="ion-edit" resting-icon="ion-plus-round">
  <a mfb-button icon="icon-class" label="child button text">
  </a>
  </nav>

The attributes provide the element configuration for position, labels and icons used. All the other styles and configurations are just css.

The best way to customise the styles is to build them directly from the source as the scss file is filled with customizable variables. From there choose your favorite colors and sizes and then compile the css.

If you use Grunt and have cloned the repo run npm init and then grunt build or grunt watch to have automatic compilation.