Gallery mosaic

Mosaic grid previews of images and other files, laid out by item count

Contents

Modern Gallery 5 or more items

Default ('xxxsmall')

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

[itemSpacing]="'xxsmall'"

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

[itemSpacing]="'xsmall'"

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg

forceRectangleMedium Modern Gallery 5 or more items

Default ('xxxsmall')

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg
gallery-5.jpg

[itemSpacing]="'xxsmall'"

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg
gallery-5.jpg

[itemSpacing]="'xsmall'"

gallery-1.jpg
gallery-2.jpg
gallery-3.jpg
gallery-4.jpg
gallery-5.jpg
Inputs in Item spacing
itemSpacing ?: "xxxsmall" | "xxsmall" | "xsmall" = 'xxxsmall'

Total spacing between each gallery item

Also set in this example
galleryItems : readonly GalleryItem[]
forceRectangleMedium ?: boolean = false

Forces the cover items to be rectangular

isViewerEnabled ?: boolean = false
Outputs
openItem ?: any = new EventEmitter<number>()