ng2-slide-down
is a simple and extremely lightweight angular 2+ module providing slide down functionality in the form of a directive.
- Animation can be turned off
- Animation duration is customizable
- Animation ease function is customizable
- Outputs for when the slide animation starts and ends
- AoT compilable
To use ng2-slide-down
in your project install it via npm
npm i ng2-slide-down --save
Add it to you app module.
@NgModule({
imports: [
...
Ng2SlideDownModule
]
})
export class AppModule {}
Include it in your template on any block element.
<div [slide-down]="contentVisible">
...
</div>
Additional inputs:
[slide-down-animated]="boolean"
- If the slide down should be animated (defaults to
true
)
- If the slide down should be animated (defaults to
[slide-down-duration]="number"
- The slide animation duration in seconds (defaults to
0.25
)
- The slide animation duration in seconds (defaults to
[slide-down-easing]="string"
- The slide animation ease function (defaults to
"ease-out"
)
- The slide animation ease function (defaults to
Outputs:
(slide-start)="slideStart($event)"
- Emitted before the slide animation starts, the value emitted is a boolean indicating if the content is currently visible.
(slide-end)="slideEnd($event)"
- Emitted when the slide animation has finished, the value emitted is a boolean indicating if the content is currently visible.
- Elements with the slide-down directive cannot have vertical padding applied to them. If this is required just wrap another div inside this element and apply padding to that div.
- Direct children of the element with the slide-down directive should be styled as a block (or flex), if you need to float the children in any way please wrap another element inside it and float its children.
<!-- No vertical padding allowed here -->
<div [slide-down]="contentVisible">
<!-- Wrapped div with padding -->
<div style="padding: 20px 0;" class="clearfix">
<!-- Floated children not direct children -->
<div style="float: left;">...</div>
...
</div>
</div>