AngularJS has revolutionized the way web applications are built, making it easier for developers to create dynamic and interactive user interfaces. One of the key features of AngularJS is its ability to use modules, plugins, and directives to enhance the functionality of a web application. In this article, we will be focusing on one such directive – Ng-Material-Floating-Button.
Demo
Before diving into the details of Ng-Material-Floating-Button, let’s take a look at a demo of this directive in action. Head over to the project homepage to see it in action. You will notice that the floating action button follows the Material Design principles, making it both visually appealing and functional.
How to Use?
To use Ng-Material-Floating-Button in your AngularJS project, you can either download the whole repository directly from Github or clone it. Once you have the files, you can run npm install to access the configured Grunt tasks. The documentation for this directive is still a work in progress, but you can find usage examples in the src folder. Additionally, you can refer to the original component documentation to customize the styles of the menu.
Basic Setup
To get started with Ng-Material-Floating-Button, you need to reference the directive CSS file in your <head> tag. This can be done by placing a reference to the directive before the closing </body> tag or anywhere after your Angular script tag. Next, make sure to add the Mfb module as a dependency to your app or module. This can be done using the following code:
var app = angular.module('your-app', ['ng-mfb']);Finally, place the correct HTML structure in your template. Let’s take a look at an example using Ionicons as the icon font:
<mfb-menu position="br" effect="zoomin" label="hover here">
<mfb-button icon="ion-plus-round" label="add new item"></mfb-button>
<mfb-button icon="ion-minus-round" label="remove last item"></mfb-button>
<mfb-button icon="ion-alert-circled" label="show some message"></mfb-button>
</mfb-menu>This example shows the two basic components of the directive – the mfb-menu element, which serves as a wrapper to a variable number of child buttons, defined by the mfb-button attribute.
Alt: Program code on laptop screen
Element Attributes
Ng-Material-Floating-Button comes with a variety of element attributes that can be used to customize its appearance and functionality. Let’s take a look at some of the most commonly used attributes.
<mfb-menu> Element
The mfb-menu element is the main container for the floating action button. It has the following attributes:
| Attribute | Description | Type | Default Value |
|---|---|---|---|
| position | Sets the position of the menu on the screen | String | ‘br’ (bottom right) |
| effect | Sets the animation effect when the menu is opened | String | ‘zoomin’ |
| label | Sets the label for the menu | String | ‘hover here’ |
<mfb-button> Element
The mfb-button element represents each individual button within the menu. It has the following attributes:
| Attribute | Description | Type | Default Value |
|---|---|---|---|
| icon | Sets the icon for the button | String | null |
| label | Sets the label for the button | String | null |
| onClick | Sets the function to be executed when the button is clicked | Function | null |
| href | Sets the URL to be opened when the button is clicked | String | null |
More Customizations
Apart from the element attributes, Ng-Material-Floating-Button also allows for more customizations through CSS. You can change the colors, sizes, and animations of the buttons and menu by modifying the CSS classes provided in the mfb.css file.
Unit Tests
Ng-Material-Floating-Button comes with a comprehensive set of unit tests to ensure its functionality and compatibility with different browsers. These tests can be found in the testfolder of the repository.
Todos
The developers of Ng-Material-Floating-Button have listed some future improvements and features that they plan to add to this directive. These include:
- Adding support for touch devices
- Implementing a way to close the menu when clicking outside of it
- Adding more animation effects
- Improving accessibility for screen readers
Credits
Ng-Material-Floating-Button was shamelessly inspired by action buttons from Google Inbox, Evernote, and Path. The original version of this component was created using vanilla HTML, but it has since been converted into an AngularJS directive. The developers would like to thank the creators of these applications for their inspiration and contribution to the development community.
Conclusion
In conclusion, Ng-Material-Floating-Button is a powerful and versatile AngularJS directive that allows developers to easily create floating action buttons following the Material Design principles. With its customizable attributes and CSS classes, this directive can be tailored to fit the needs of any web application. We hope this article has provided you with a comprehensive understanding of Ng-Material-Floating-Button and how to use it in your projects.