This project is an AngularJS version of the aswesome bootstrap material design. It removes the dependency on jQuery as well as Bootstrap's JavaScript and makes it easy to work with dynamic angularJS components
To install via bower, run
bower install abm
or grab the latest source from Github and include it in your project after the dependencies. Include angularBootstrapMaterial module in your application:
angular.module('app', ['angularBootstrapMaterial']);
This project doesn't do any CSS magic, all that comes from Bootstrap material design.
For demos and documentation of typography, tables, icons etc refer the Bootstrap material design documentation.
Create a material design input by adding abmFormControl directive to an input element and wrapping it in abmFormGroup directive.
If the input is accompanied by a label, it should contain abmLabel directive. The behaviour of label can be controlled by adding a type attribute whos value can be either "floating" or "static"(default)
Control the size of the component by adding the classes "form-group-sm" or "form-group-lg" on the abmFormGroup directive.
Creating a material design textarea the same as creating an input, except that abmFormControl directive should be added to a textarea element.
Create a material design checkbox by adding abmCheckbox directive to the checkbox input's wrapper. Add a label property on it to specify it's label
Create a checkbox group by simply wrapping the checkboxes in a abmFormGroup directive
Creating a material design radio or radio group is similar to creating a checkbox or checkbox group, except that abmRadio directive needs to be added to the radio input's wrapper.
A simple select does not need any special direcitves. However if it accompanied by a label, or has validation message applied which needs to be highlighted similar to other controls, it should have abmFormControl directive and should be wrapping in abmFormGroup directive.
For using bootstrap's JavaScript components, include UI Bootstrap in your project and follow the instructions in it's documentation
.To apply the material style ripple effect, add the abmComponent directive as shown in the below examples.
Create a material design toggle button by adding abmtoggle directive to the checkbox input's wrapper. Add a label property on it to specify it's label