This project was generated with angular-cli version 1.0.0-beta.19-3.
Material design floating action button implemented as an Angular2 component. inspired by action buttons from Google Inbox, Evernote and Path.
Made to be fast and easy to customise.
Head over to the project homepage to see it in action as a standalone component just take a look at this awesome gif:
Download the whole repo or clone it
Make sure you reference the Mfb module as a dependecy to your app or module like so:
import { ng2mfbModule } from 'ng-floating-button';
@NgModule({
...
imports: [
...
ng2mfbModule
],
...
})Finally, place the correct html structure in your template. As a first example, assuming your example is using Ionicons as icon font:
<ng2-floating-button
[placement]="'placment'"
[effect]="'effect'"
[label]="'label'"
[iconClass]="'iconClass'"
[activeIconClass]="'activeIconClass'"
[toggle]="'toggle'"
[buttons]="[buttons]">
</ng2-floating-button>NOTE: if you want to change the CSS make you sure you understand how it's supposed to be done.
A number of attributes can be passed to the elements from the template in order to customise both behavior and appearance.
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:
<ng2-floating-button [placement]="'br'">
<!-- this will be displayed on the bottom-right corner of the screen -->
</ng2-floating-button>Defines how the user will open the menu. Two values are possible:
| value | explanation |
|---|---|
hover |
hover to open the menu |
click |
click or tap to open the menu |
Example:
<ng2-floating-button [toggle]="'click'">
<!-- this will be displayed on the bottom-right corner of the screen -->
</ng2-floating-button>NOTE: Using hover will prevent user browsing on modbile/touch devices to properly interact with the menu. The directive provides a fallback for this case.
Defines the effect that is performed when the menu opens up to show its child buttons.
| value |
|---|
mfb-zoomin |
mfb-slidein |
mfb-slidein-spring |
mfb-fountain |
Test them here.
Example:
<ng2-floating-button [effect]="'mfb-zoomin'">
<!-- this will be displayed on the bottom-right corner of the screen -->
</ng2-floating-button>The text that is displayed when hovering the main button. Example:
<ng2-floating-button label="'your text here'">
</ng2-floating-button>The icon that will be displayed by default on the main button. Example:
<ng2-floating-button [iconClass]="'ion-plus-round'">
</ng2-floating-button>The icon that will be displayed by default on the main button. Example:
<ng2-floating-button [activeIconClass]="'ion-close-round'">
</ng2-floating-button>The buttons that will be displayed when in active/open state. buttons shold be array of type MfbButton Example:
import { MfbButton } from 'ng-floating-button';
buttons: Array<MfbButton> = [
{
iconClass: 'ion-social-github', // This icon will be displayed on the button
label: 'follow me on github', // This is the label text of the button
onClick: function(){
...
} // This is the button click handler, it will be called when the button is clicked
}
]<ng2-floating-button [buttons]="buttons">
</ng2-floating-button>