reusableComponents is an AngularJS module containing directives for light, configurable UI components which can be restyled. It relies on the directives of the reusableBehaviors module.
- Checkbox - Exactly what you'd expect
- Toggle - A slider toggle
- Directives are named in the typical angular fashion, beginning with a two-character mnemonic, followed by a single word which is descriptive of the behavior that the directive provides. (e.g. rc-checkbox, rc-toggle)
- Some of the directives rely on attributes for configuration, see the demos page for more details
- Some directives depend on services, check out the demos page for more info
These directives are meant for use with the ng-class directive and a strong knowledge of CSS and CSS transitions. They can be used to provide behaviors to standalone elements, or they can be invoked inside of other directives with styles already applied, providing behavior to the contents of the container directive.
####Example
This is the source code for the rc-toggle directive.
And this is an example of the rc-toggle directive being used in the DOM
In this example, the directive is instantiated on the button and its API is defined as "window". This API is then used by the <button> element, which invokes the directive's toggle method whenever it is clicked. The result of invoking the toggle method is that the boolean window.active changes its state.
The following CSS applies a transition whenever window.toggle is invoked.
Installation is very simple.
- Include rc.js or rc.min.js file in your project directory
- Inside of your index.html, include a
<script>tag which points to rc.js or rc.min.js - In the declarration of your angular app, pass 'reusable-components' as a dependency, like:
angular.module('myApp', ['reusable-components']);MIT License can be viewed here