MediaGallery

<ui5-media-gallery> | Since 1.1.0

The ui5-media-gallery component allows the user to browse through multimedia items. Currently, the supported items are images and videos. The items should be defined using the ui5-media-gallery-item component.

The items are initially displayed as thumbnails. When the user selects a thumbnail, the corresponding item is displayed in larger size.

The component is responsive by default and adjusts the position of the menu with respect to viewport size, but the application is able to further customize the layout via the provided API.

Keyboard Handling

The ui5-media-gallery provides advanced keyboard handling.

When the thumbnails menu is focused the following keyboard shortcuts allow the user to navigate through the thumbnail items:

• [Up] or [Down] - Navigates up and down the items
• [Home] - Navigates to first item
• [End] - Navigates to the last item
• [Space], [Enter] - Selects an item

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/MediaGallery.js";

import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";

Basic Sample

Properties

interactiveDisplayArea

Description	If enabled, a display-area-click event is fired when the user clicks or taps on the display area. The display area is the central area that contains the enlarged content of the currently selected item.
Type	boolean
Default	false

layout

Description	Determines the layout of the component.
Type	"Auto" | "Horizontal" | "Vertical" (value descriptions in: MediaGalleryLayout)
Default	"Auto"

menuHorizontalAlign

Description	Determines the horizontal alignment of the thumbnails menu vs. the central display area.
Type	"Left" | "Right" (value descriptions in: MediaGalleryMenuHorizontalAlign)
Default	"Left"

menuVerticalAlign

Description	Determines the vertical alignment of the thumbnails menu vs. the central display area.
Type	"Bottom" | "Top" (value descriptions in: MediaGalleryMenuVerticalAlign)
Default	"Bottom"

showAllThumbnails

Description	If set to true, all thumbnails are rendered in a scrollable container. If false, only up to five thumbnails are rendered, followed by an overflow button that shows the count of the remaining thumbnails.
Type	boolean
Default	false

Slots

default

Description	Defines the component items. Note: Only one selected item is allowed. Note: Use the ui5-media-gallery-item component to define the desired items.
Type	Array<IMediaGalleryItem>

Events

display-area-click

Description	Fired when the display area is clicked. The display area is the central area that contains the enlarged content of the currently selected item.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

overflow-click

Description	Fired when the thumbnails overflow button is clicked.
Type	CustomEvent
Bubbles	Yes
Cancelable	No

selection-change

Description	Fired when selection is changed by user interaction.
Type	CustomEvent<MediaGallerySelectionChangeEventDetail>
Parameters	item: HTMLElement the selected item.
Bubbles	Yes
Cancelable	No

Methods

No methods available for this component.

CSS Parts

No CSS parts available for this component.

CSS Custom States

No CSS custom states available for this component.

More Samples

Vertical Layout

The thumbnails and selected item are vertically placed. To enable this layout - set layout="Vertical".

Horizontal Layout

The thumbnails and selected item are horizontally placed. To enable this layout - set layout="Horizontal". You can also define on which side of the selected item to place the thumbnails.

Custom Thumbnail

By default the image passed to the MediaGalleryItem is reused as a thumbnail. You can display another image as thumbnail via the thumbnail slot of the MediaGalleryItem.

Selected Item

You can predefine the selected item.

Disabled Item

The MediaGallery can show disabled items as well.

Interactive Display Area

Setting interactiveDisplayArea property makes the display area interactive, e.g. clickable.

Show Video Content