packages/ecl/components/ecl-gallery/ecl-gallery.component.ts
This component represents a collection of images or videos and allows a user to browse them. Adds functionality and styling, according to the ECL standards.
AfterContentInit
OnDestroy
AfterViewInit
| selector | ecl-gallery |
| imports |
TranslateModule
NgTemplateOutlet
EUI_ECL_BUTTON
EUI_ECL_ICON
EUI_ECL_LINK
|
| styles |
:host {
display: block;
}
|
| templateUrl | ./ecl-gallery.component.html |
Properties |
Methods |
Inputs |
Outputs |
HostBindings |
HostListeners |
Accessors |
| columns |
Type : "2" | "3" | "4" | number
|
Default value : 3
|
| isFullWidth |
Type : boolean
|
Default value : false
|
|
If set to true, the gallery will have 100 view width. |
| isGrid |
Type : boolean
|
Default value : false
|
|
If set to true, a specific class will be applied, so the gallery thumbnails are displayed as a grid, all with same size. |
| isNoOverlay |
Type : boolean
|
Default value : false
|
|
If set to true, no overlay will be displayed when user clicks on an image. |
| isOpenInFullScreenPossible |
Type : boolean
|
Default value : true
|
| isShareable |
Type : boolean
|
Default value : true
|
|
If the items in the gallery can be shared. I.e. if the link for sharing will be present for each item. |
| isShowTitleOnHover |
Type : boolean
|
Default value : true
|
|
If set to false, no title will be displayed when user hover on a gallery item. |
| maxVisibleItems |
Type : number
|
|
Number of gallery items to be displayed by default. The rest can be displayed with the 'View all' button. |
| ratio |
Type : "3-1" | "3-2" | string
|
Default value : '3-2'
|
|
The ratio that will be applied to the gallery thumbnails. |
| class |
Type : string
|
| e2eAttr |
Type : any
|
| tabindex |
Type : number
|
| hide |
Type : EventEmitter
|
|
Emits event when an expanded item is closed. |
| itemSwitch |
Type : EventEmitter
|
|
Emits event when user is browsing items, opened in an overlay. |
| openFullScreen |
Type : EventEmitter
|
|
Emits event when an item is opened in full screen. |
| share |
Type : EventEmitter
|
|
Emits event when an item is shared. |
| show |
Type : EventEmitter
|
|
Emits event when user clicks on an item to expand it. |
| attr.role |
Type : string
|
Default value : 'region'
|
|
The default role of the component is 'region' and should not be changed. |
| class |
Type : string
|
|
Applies specific clases to the component, related to the component properties values. |
| document:keydown.escape | ||||
document:keydown.escape()
|
||||
|
On pressing 'esc' key - close the item dialog and emit 'hide' event.
Parameters :
|
| canBeOpenInFullScreen |
canBeOpenInFullScreen()
|
|
Returns :
boolean
|
| canBeShared |
canBeShared()
|
|
Returns :
boolean
|
| getIframeHeight |
getIframeHeight()
|
|
Returns :
number
|
| getIframeWidth |
getIframeWidth()
|
|
Returns :
number
|
| onClose | ||||||
onClose(evt: MouseEvent)
|
||||||
|
Emit 'hide' event, when closing item dialog.
Parameters :
Returns :
void
|
| onEscapeKeydownHandler |
onEscapeKeydownHandler()
|
Decorators :
@HostListener('document:keydown.escape')
|
|
On pressing 'esc' key - close the item dialog and emit 'hide' event.
Returns :
void
|
| onFullScreenOpen | ||||||
onFullScreenOpen(evt: MouseEvent)
|
||||||
|
Parameters :
Returns :
void
|
| onNext | ||||||
onNext(evt: MouseEvent)
|
||||||
|
Emit 'itemSwitch' event, when switching to the next item. Event contains the new current item.
Parameters :
Returns :
void
|
| onPrevious | ||||||
onPrevious(evt: MouseEvent)
|
||||||
|
Emit 'itemSwitch' event, when switching to the previous item. Event contains the new current item.
Parameters :
Returns :
void
|
| onShare | ||||||
onShare(evt: MouseEvent)
|
||||||
|
Parameters :
Returns :
void
|
| setIframeDimensions |
setIframeDimensions()
|
|
Returns :
void
|
| getCssClasses | ||||||
getCssClasses(rootClass: string)
|
||||||
|
Parameters :
Returns :
string
|
| footerChild |
Type : ElementRef
|
Decorators :
@ViewChild('footer')
|
| galleryFooter |
Type : EclGalleryFooterComponent
|
Decorators :
@ContentChild(EclGalleryFooterComponent)
|
| galleryItems |
Type : QueryList<EclGalleryItemComponent>
|
Decorators :
@ContentChildren(EclGalleryItemComponent)
|
| headerChild |
Type : ElementRef
|
Decorators :
@ViewChild('header')
|
| isDialogVisible |
Type : unknown
|
Default value : false
|
| isMobile |
Type : unknown
|
Default value : false
|
| item |
Type : EclGalleryItemComponent
|
| itemIndex |
Type : number
|
| itemsCount |
Type : number
|
| overlayChild |
Type : ElementRef
|
Decorators :
@ViewChild('overlay')
|
| role |
Type : string
|
Default value : 'region'
|
Decorators :
@HostBinding('attr.role')
|
|
The default role of the component is 'region' and should not be changed. |
| cssClasses |
getcssClasses()
|
|
Applies specific clases to the component, related to the component properties values.
Returns :
string
|