Bits | Freelancer Bits

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

Modern Gallery 1 item

Modern Gallery 2 items

Modern Gallery 3 items

Modern Gallery 4 items

DEFAULT Modern Gallery 5 or more items

Reverse Gallery

forceRectangleMedium Modern Gallery 5 or more items

forceRectangleMedium Reverse Gallery

Inputs

galleryItems : readonly GalleryItem[]

centerContent ?: boolean = false

forceRectangleMedium ?: boolean = false

Forces the cover items to be rectangular

imageSizes ?: string

inlineVideos ?: boolean = false

When true, VIDEO items render inline playback instead of a file icon preview

interactiveContent ?: boolean = false

isGalleryItemsDownloadable ?: boolean = true

isViewerEnabled ?: boolean = false

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

Total spacing between each gallery item

linkEntireTile ?: boolean = false

When true with `interactiveContent`, the image/video area links to `galleryItem.link` (default `/post-project`) including `queryParams`.

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