Ng-Material-Floating-Button

Material design floating button menu implementation for Angularjs.
6 people use it
Author: 2051152?v=3 nobitagit

ng-material-floating-button

Material design floating action button implemented as an Angularjs directive.

Made to be semantic, fast and easy to customize. Shamelessly inspired by action buttons from Google Inbox, Evernote and Path.

Demo

Head over to the project homepage to see it in action.

Other versions - Vanilla html (original, upstream version of the component)

How to use

Download the whole repo directly here on Github or clone it, then (optionally) run npm install to have access to the configured Grunt tasks.

Docs are still in the works (and coming soon), for the time being look in the src folder for usage examples and head to the original component docs to see how to customise the styles of the menu.

Basic setup

Download the whole repo or clone it, then reference the directive css file (here is mfb/src/mfb.css)in your <head>:

Place a reference to the directive before the closing <body> tag or anywhere after your angular script tag.

Make sure you reference the Mfb module as a dependecy to your app or module like so: js var app = angular.module('your-app', ['ng-mfb']); Finally, place the correct html structure in your template. As a first example, assuming your example is using Ionicons as icon font:

This example shows the two basic components of the directive, a unique mfb-menu element which serves as a wrapper to a variable number of child buttons, defined by the mfb-button attribute. This above code will output a basic button menu on the bottom right corner of the screen with a single menu item. Hardly amazing, so let's see how to customise it.

Element attributes

A number of attributes can be passed to the elements from the template in order to customise both behavior and appearance.

<mfb-menu> element

This can be defined as an attribute or an element. So this is valid: html <ul mfb-menu></ul> ...and this is valid too: html <mfb-menu></mfb-menu>

Position

Defines in which corner of the screen the component should be displayed.

value | explanation --- | --- tl | top-left corner tr | top-right corner br | bottom-right corner bl | bottom-left corner

Example: html <ul mfb-menu position="br"> <!-- this will be displayed on the bottom-right corner of the screen --> </ul>

Effect

Defines the effect that is performed when the menu opens up to show its child buttons.

value | explanation --- | --- zoomin | test it here slidein | test it here fountain | test it here

Example: html <ul mfb-menu effect="zoomin"> </ul>

Label

The text that is displayed when hovering the main button. Example: html <ul mfb-menu label="your text here"> </ul>

Active-icon

The icon that will be displayed by default on the main button. Example: html <ul mfb-menu active-icon="ion-edit"> </ul>

Resting-icon

The icon that will be displayed on the main button when hovering/interacting with the menu. Example: html <ul mfb-menu resting-icon="ion-plus-round"> </ul>

<mfb-button> element

This element represents the child button(s) of the menu and can only "live" inside a wrapper <mfb-menu> element. Like its parent, it can be defined both as an attribute and as an element. So this is valid: html <a mfb-button></a> ...and this is valid too: html <mfb-button></mfb-button>

Icon

Pass the class of the icon font character that is associated to the menu item: Example: html <a mfb-button icon="ion-paperclip"></a>

Label

The text that is displayed when hovering the button. Example: html <a mfb-button label="About us"></a>

Custom attributes

Due to the nature of the component you'll probably want to associate some actions or use other angular directives such as ng-repeat on the buttons. As these attributes will be copied over to the generated html structure you can simply attach them to the <mfb-element>. A couple of examples, here using ui-router: html <!-- if using ui-router, associate an on-click event to the anchor--> <a mfb-button ui-sref="yourState"></a> And here leveraging a basic ng-repeat with buttons defined via js: js // in your controller... $scope.buttons = [{ label: 'a link text', icon: 'ion-paper-airplane' },{ label: 'another link', icon: 'ion-plus' },{ label: 'a third link', icon: 'ion-paperclip' }; html <!-- in your template --> <!-- this will output 3 buttons with different icon, label and so on--> <a mfb-button label="{{button.label}}" icon="{{button.icon}}" ng-repeat="button in buttons"></a>

More customisations

The component have plenty more customisations available and they are all handled by the CSS. The CSS and its SCSS source files are found in the mfb/ folder (which is actually a subtree that pulls from this repo), while a customisation file is provided (mfb/_customisation.scss) to override the defaults without editing the source files.

For a thorough overview of what and how to customise the look of the component through css make sure you read these docs, especially if you plan to keep your copy in sync with this repo by pulling in changes in the future.

Unit tests

To run the tests you need Jasmine and Karma runner. They can be run from the console with either grunt karma or karma start test/karma.conf.js commands.

Todos

  • [ ] add "click to open" functionality and option

Credits

Demo icons courtesy of Ionicons

comments powered by Disqus
This page was last updated almost 2 years ago.