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 eady to work with dynamic angularJS components
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)
You can 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.
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 on the root element of a bootstrap compoenet, 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