Ng Slide Down
AngularJS directive for vertical slide down animation (JS Fiddle).
Installation
Just add this module as a dependency:
angular.module("myApp", ['ng-slide-down'])
You can download this module from bower using
bower install ng-slide-down
Usage
In order to use a directive add attribute ng-slide-down
to an element you want to hide. Pass some variable to it as a value and it's going to serve as a trigger to expand/hide the element: lazy-render="someVariable"
.
Features
Lazy rendering
Has option to prevent HTML generation of contents unless expanded (due to performance considerations). Optimal for a big number of widgets (production tested).
All you need to do is to add lazy-render
attribute to an element with a directive.
Keep Alive
Additionally, if you need to keep the contents of the expand and collapse from recompiling after the initial expand takes place, adding keep-alive
will prevent re-rendering
of the html template. This is usefull if you are expanding / collpasing content that may contain directives / components that makes API calls on initializtion.
Automatic height adjustment
Directive watches for a height of it's content and readjusts it's size automatically - no extra work required.
Options
ng-slide-down (required)
Main attribute, required for directive to work, passed variable defines whether element should slide down or slide up
<div ng-slide-down="slideDown">
duration
Time in seconds for animation to complete (default is 1 second).
<div ng-slide-down="slideDown" duration="1.5">
timing-function
Easing function (transition-timing-function
) to use in the animation (default is ease-in-out).
<div ng-slide-down="slideDown" timing-function="linear">
lazy-render
Add this attribute to prevent rendering when content is hidden. Doesn't require value.
<div ng-slide-down="slideDown" lazy-render>
keep-alive
Add this attribute to prevent recompiling of content in the template. Useful for content that may contain addition directives / components that receive data from an API.
<div ng-slide-down="slideDown" lazy-render keep-alive>
on-close
Expression evaluated when slider is finished closing
<div ng-slide-down="slideDown" on-close="someVariable = true">
emit-on-close
Message emitted when slider is finished closing
<div ng-slide-down="slideDown" emit-on-close="widget_closed">
Then you can subscribe to it in an outer scope:
$scope.on('widget_closed', function() { /* do stuff */ });
Usage example
Full version can be found on JS Fiddle
<div ng-click="widgetExpanded = !widgetExpanded">
Click to slide in/out
</div>
<div ng-slide-down="widgetExpanded" lazy-render duration="1">
Some awesome content here
</div>
Words of caution
Lazy render may not work for older angular versions due to a bug (fixed on 20.05.2014). Make sure to update your angular.
If your content has padding or margins make sure to wrap it into div without them.
<div ng-slide-down="slideDown">
<div> <!-- wrapper -->
... content with padding ...
</div>
</div>
Building yourself
Source code is written in CoffeeScript, in order to build it just run grunt
command in your CLI and it will take care of compiling to JS and minifying.
Contributing
Oh darling... You are always welcome!
License
This code is released under the MIT License.