8.0.0 • Published 5 years ago
ff-img-overlay v8.0.0
ff-img-overlay
Installing
npm install ff-img-overlay --save
Using
Simple usage
<ff-img-overlay
[imgUrl]="'/images/iphone25.png'"
[text]="'IPhone 25'"
<!-- if [scale] is true base image will have a slight scaling-->
[scale]="true"
></ff-img-overlay>
Usage with own templates:
<!-- You can create some template as base -->
<ng-template #myBase>
<img src="/images/iphone25.png" alt="" style="width:100%;height: auto; display: block">
...
</ng-template>
<!-- ... and as overlay -->
<ng-template #overlay>
<p class="myClass">IPhone 25!</p>
...
</ng-template>
<ff-img-overlay
<!-- You can use [mainTmp] attribute instead of [imgUrl] and put your template reference variable for base-->
[mainTmp]="mainTmp"
<!-- and [overlayTmp] property instead of [text] for overlay-->
[overlayTmp]="overlay"
></ff-img-overlay>
Animations
You can set your own animations for appearance and disappearance:
<ff-img-overlay
<!--Just use [cssClassEnter] property for overlay appearance-->
[cssClassEnter]="'zoomIn'"
<!-- and [cssClassLeave] for overlay disappearance-->
[cssClassLeave]="'zoomOut'"
<!-- Also you should specify some css class for animation.
It means that this class must have css transition property or animation-duration-->
[cssClassAnimated]="'animated'"
></ff-img-overlay>
Events hendle
You can handle events, component has outputs for that:
<ff-img-overlay
(mouseLeave)="leaveHandler($event)"
(mouseEnter)="enterHandler($event)"
></ff-img-overlay>
Types and default values
@Input() mainTmp : TemplateRef<any>;
@Input() overlayTmp : TemplateRef<any>;
@Input() imgUrl : string;
@Input() text : string;
@Input() scale : boolean;
@Input() cssClassEnter : string = 'ff-enter';
@Input() cssClassLeave : string = 'ff-leave';
@Input() cssClassAnimated : string = 'ff-animated';
@Output() mouseEnter : EventEmitter<any>;
@Output() mouseLeave : EventEmitter<any>;
Styling
You can change default styles. That can be used to target the override
.ff-img-overlay_wrapper{
}
.ff-img-overlay_base{
}
.ff-img-overlay_img{
}
.ff-img-overlay_overlay{
}
.ff-img-overlay_text{
}