Gallery mosaic

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

Contents

Setting roundGalleryCorners to RoundCornerType.CONTAINER rounds only the gallery's container corners.

Modern Gallery 5 or more items

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

forceRectangleMedium Modern Gallery 5 or more items

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

Setting roundGalleryCorners to RoundCornerType.ITEM rounds the each gallery item corner.

Modern Gallery 5 or more items

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

forceRectangleMedium Modern Gallery 5 or more items

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

Modern Gallery 5 or more items with interactive content

gallery-1.jpg

Project Title

Project Price

Discover more
gallery-2.jpg

Project Title

Project Price

Discover more
gallery-3.jpg

Project Title

Project Price

Discover more
gallery-4.jpg

Project Title

Project Price

Discover more

forceRectangleMedium Modern Gallery 5 or more items with interactive content

gallery-1.jpg

Project Title

Project Price

Discover more
gallery-2.jpg

Project Title

Project Price

Discover more
gallery-3.jpg

Project Title

Project Price

Discover more
gallery-4.jpg

Project Title

Project Price

Discover more
gallery-5.jpg

Project Title

Project Price

Discover more
Inputs in Rounded corners
roundGalleryCorners ?: RoundCornerType

Rounds the gallery's container or item corners

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

Forces the cover items to be rectangular

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