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

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

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" | "Vertical" | "Horizontal"
Default	"Auto"

menuHorizontalAlign

Description	Determines the horizontal alignment of the thumbnails menu vs. the central display area.
Type	"Left" | "Right"
Default	"Left"

menuVerticalAlign

Description	Determines the vertical alignment of the thumbnails menu vs. the central display area.
Type	"Top" | "Bottom"
Default	"Bottom"

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

selection-change

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

overflow-click

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

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

Methods

No methods available for this component.

CSS Parts

No CSS parts 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 vertically placed. To enable this layout - set layout="Horizontal". Furthermore, you can also define on which side of the selected item you preffer to place the thumnails. For instance, setting menu-horizontal-align="Right" will place the thumbnails on the rigtht.

Custom Thumbnail

By default the image, passed to the MediaGalleryItem, is reused as a thumbnail that the user clicks. However, 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 diasbled items as well. In this sample, the first item is disabled and second is shown.

Interactive Display Area

Setting interactiveDisplayArea property makes the diplay area (where the media content is displayed) interactive, e.g. clickable. In the sample, clicking on the diplay area fires an event, and in this case we show a dialog, but the application can do whatever suitable in the given scenario.

Show Video Content