0.0.1 • Published 1 year ago
lib-dialog-gallerys v0.0.1
ngx-dialog-gallery
Simple, easy and performance dialog gallery (image , video , content) for angular.
Demo
Usage
1. Install
npm install ngx-dialog-gallery --save
import DialogGalleryModule
。
import { DialogGallery } form "DialogGallery";
@NgModule({
imports: [BorwserModule, DialogGallery],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
2. Template
<ng-template let-data #gallery>
<dialog-gallery
[isShowZoomIcon]="true"
[tooltipCloseText]="'กดปุ่ม Esc เพื่อปิด'"
[isShowFullscreenIcon]="true"
[isShowFullscreen]="false"
[tooltipFullscreenText]="'ออกจากโหมดเต็มจอ'"
[tooltipMinimizeFullscreenText]="'เข้าสู่โหมดเต็มจอ'"
[isAction]="isAction"
[classOverlay]="[]"
(eventClose)="clickClose($event)"
(eventChange)="clickTurn($event)"
>
<ng-container content></ng-container>
</dialog-gallery>
</ng-template>
Method
Name | Description |
---|---|
clickClose() | click to close dialog gallery. |
clickZoom() | click to zoom image, not zoom video. |
clickNavigateBefore() | click image or video before. |
clickNavigateNext() | click image or video next. |
checkIsArray() | check data value array or object. |
checkType() | check type data value image or video. |
How call component methods
@ViewChild('gallery', { read: TemplateRef, static: false })
public gallery!: TemplateRef<any>;
API
Config
Name | Type | Default | Summary |
---|---|---|---|
isShowZoomIcon | boolean | true | For showing the icon to zoom the image. |
tooltipCloseText | string | กดปุ่ม Esc เพื่อปิด | Text to be displayed when closing. |
isShowFullscreenIcon | boolean | true | For showing the icon to fullscreen the image and video. |
isShowFullscreen | boolean | false | for full screen. |
tooltipFullscreenText | string | ออกจากโหมดเต็มจอ | Text to be displayed when fullscreen. |
tooltipMinimizeFullscreenText | string | เข้าสู่โหมดเต็มจอ | Text to be displayed when minimized fullscreen. |
classOverlay | string[] | [''] | add class in overlay. |
isAction | boolean | true | Actions that affect (clickClose, clickNavigateBefore, clickNavigateNext) |
eventClose | EventEmitter<any> | - | Events |
eventChange | EventEmitter<any> | - | Events |
0.0.1
1 year ago