Gallery mosaic

Grid preview of files

The gallery mosaic component provides a way of previewing images in a mosaic style based on the amount of elements, it currently supports a general file type and images.

Contents

Default

The singleImagefit input is used to specify how a single image in the modern structure should be rendered and fit. The concept is similar to the Picture's object fit but with gallery specific behaviors.

'contain'

This forces the whole image to be fit inside the whole width of the container. The height of the image will be scaled proportionally.

'cover'

This forces the image to fit in a 4/3 aspect ratio. and forces the image to fill the entire container, cropping the image as necessary

Image optimization caveat

NOTE: The whole image will still be downloaded while only the cropped portion will be shown. This may lead performance issues due to larger than necessary file sizes; Follow image optimization best practices to for the best image file size and visual quality.

Inputs

galleryItems : readonly GalleryItem[]

centerContent ?: boolean = false

forceRectangleMedium ?: boolean = false

Forces the cover items to be rectangular

imageSizes ?: string

interactiveContent ?: boolean = false

isGalleryItemsDownloadable ?: boolean = true

isViewerEnabled ?: boolean = false

itemSpacing ?: "xxxsmall" | "xxsmall" | "xsmall" = 'xxxsmall'

Total spacing between each gallery item

loadMethod ?: PictureLoadMethod

This variable defines how an image is to be loaded

maxWidth ?: number

pictureObjectFit ?: PictureObjectFit

reverseGallery ?: boolean = false

This input only works when `forceRectangleMedium` is applied

roundGalleryCorners ?: RoundCornerType

Rounds the gallery's container or item corners

singleImageFit ?: SingleImageFit = 'cover'

How a single image should fit in the container.

textSize ?: TextSize

textSizeDesktop ?: TextSize

textSizeTablet ?: TextSize

usingFastlyIO ?: boolean = false

zoomOnHover ?: boolean = true

Outputs

openItem ?: any = new EventEmitter<number>()

Alerts & notifications

Buttons & actions

Cards

Forms

Icons / images / media

Layouts

Navigation

Popups / overlays

Progress & loading indicators

Tags

Typography

Gallery mosaic