UI5 Web Components
Search

MediaGallery

v1.1.0
@ui5/webcomponents-fiori
<ui5-media-gallery>

Usage

<ui5-media-gallery show-all-thumbnails>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1000.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1010.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1022.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1030.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2002.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2026.jpg">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery with vertical layout

<ui5-media-gallery show-all-thumbnails
	layout="Vertical">
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1000.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1010.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1022.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1030.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2002.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2026.jpg">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery with thumbnails on the right

<ui5-media-gallery show-all-thumbnails
	layout="Horizontal"
	menu-horizontal-align="Right">
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1000.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1010.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1022.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1030.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2002.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-2026.jpg">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery item with separate image for its thumbnail

<ui5-media-gallery>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1000.jpg">
		<img src="../../../assets/images/HT-1000-small.jpg" slot="thumbnail">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery item with video content

SAP Video 
<ui5-media-gallery>
	<ui5-media-gallery-item layout="Wide">
		<iframe src="https://www.youtube.com/embed/GxGZG2fv6Aw" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
		<img src="../../../assets/images/sap-logo-square.svg" slot="thumbnail" alt="SAP Video">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery with disabled content

<ui5-media-gallery>
	<ui5-media-gallery-item disabled>
		<img src="../../../assets/images/HT-1000.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1010.jpg">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery with initially selected item

<ui5-media-gallery>
	<ui5-media-gallery-item>
		<img src="../../../assets/images/HT-1000.jpg">
	</ui5-media-gallery-item>
	<ui5-media-gallery-item selected>
		<img src="../../../assets/images/HT-1010.jpg">
	</ui5-media-gallery-item>
</ui5-media-gallery>

MediaGallery with thumbnails overflow

Item Details Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam lectus, tristique semper mi et, faucibus viverra metus. Quisque nec venenatis massa. Ut eu dolor a justo ornare feugiat. Morbi congue diam id enim porttitor, sit amet placerat nunc pulvinar. Vivamus eu feugiat justo. Ut eu lectus mauris. Aliquam erat volutpat. Vestibulum et enim sit amet ipsum tincidunt aliquet nec in dui. Sed dui est, hendrerit non sollicitudin quis, venenatis vel libero. Suspendisse sit amet lorem posuere, egestas neque eget, sodales ipsum. Donec sollicitudin leo ut risus tincidunt tincidunt. Ut vel nisl nisl. Cras leo odio, viverra a ante nec, cursus volutpat lectus. Cras ac metus nisi. Aliquam fermentum nec felis sit amet tristique. Nunc luctus a lacus non semper. Curabitur euismod tellus id massa mattis, in consectetur mi luctus. Mauris dignissim efficitur lobortis. Etiam sit amet nunc commodo, lacinia nisi sagittis, finibus nulla. Proin quis elementum eros. Ut facilisis lacinia viverra.
Item
Close 
<div class="container">
	<ui5-media-gallery id="mediaGallery" interactive-display-area>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1000.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1010.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1022.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1030.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-2002.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-2026.jpg">
		</ui5-media-gallery-item>
	</ui5-media-gallery>
	<div class="details">
		<ui5-title level="H1">Item Details</ui5-title>
		Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis quam lectus, tristique semper mi et, faucibus viverra metus. Quisque nec venenatis massa. Ut eu dolor a justo ornare feugiat. Morbi congue diam id enim porttitor, sit amet placerat nunc pulvinar. Vivamus eu feugiat justo. Ut eu lectus mauris. Aliquam erat volutpat. Vestibulum et enim sit amet ipsum tincidunt aliquet nec in dui. Sed dui est, hendrerit non sollicitudin quis, venenatis vel libero. Suspendisse sit amet lorem posuere, egestas neque eget, sodales ipsum.
		Donec sollicitudin leo ut risus tincidunt tincidunt. Ut vel nisl nisl. Cras leo odio, viverra a ante nec, cursus volutpat lectus. Cras ac metus nisi. Aliquam fermentum nec felis sit amet tristique. Nunc luctus a lacus non semper. Curabitur euismod tellus id massa mattis, in consectetur mi luctus. Mauris dignissim efficitur lobortis. Etiam sit amet nunc commodo, lacinia nisi sagittis, finibus nulla. Proin quis elementum eros. Ut facilisis lacinia viverra.
	</div>
</div>
<ui5-dialog id="mediaGalleryDialog" header-text="Item" stretch>
	<ui5-bar design="Header" slot="header">
		<ui5-label>Item</ui5-label>
	</ui5-bar>
	<ui5-media-gallery show-all-thumbnails
		menu-horizontal-align="Right">
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1000.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1010.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1022.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-1030.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-2002.jpg">
		</ui5-media-gallery-item>
		<ui5-media-gallery-item>
			<img src="../../../assets/images/HT-2026.jpg">
		</ui5-media-gallery-item>
	</ui5-media-gallery>
	<div slot="footer"	class="dialog-footer">
		<div style="flex: 1;"></div>
		<ui5-button id="closeDialogButton">Close</ui5-button>
	</div>
</ui5-dialog>
<style>
	@media (min-width: 1024px) {
		.container {
			display:grid;
			gap: 1rem;
			grid-template-columns: 1fr 1fr;
		}
	}
</style>
<script>
	mediaGallery.addEventListener("overflow-click", function(event) {
		mediaGalleryDialog.show();
	});
	mediaGallery.addEventListener("display-area-click", function(event) {
		mediaGalleryDialog.show();
	});
	closeDialogButton.addEventListener("click", function() {
		mediaGalleryDialog.close();
	});
</script>

Overview

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/DOWN] - Navigates up and down the items
  • [HOME] - Navigates to first item
  • [END] - Navigates to the last item
  • [SPACE/ENTER] - Select an item

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/MediaGallery";
import "@ui5/webcomponents-fiori/dist/MediaGalleryItem";

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
interactiveDisplayArea
interactive-display-area
boolean
false
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.
layout
MediaGalleryLayout
"Auto"
Determines the layout of the component.

Available options are:
  • Auto
  • Vertical
  • Horizontal
menuHorizontalAlign
menu-horizontal-align
MediaGalleryMenuHorizontalAlign
"Left"
Determines the horizontal alignment of the thumbnails menu vs. the central display area.

Available options are:
  • Left
  • Right
menuVerticalAlign
menu-vertical-align
MediaGalleryMenuVerticalAlign
"Bottom"
Determines the vertical alignment of the thumbnails menu vs. the central display area.

Available options are:
  • Top
  • Bottom
showAllThumbnails
show-all-thumbnails
boolean
false
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.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement [0..n]
Defines the component items.

Note: Only one selected item is allowed.

Note: Use the ui5-media-gallery-item component to define the desired items.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
display-area-click
Fired when the display area is clicked.
The display area is the central area that contains the enlarged content of the currently selected item.
overflow-click
Fired when the thumbnails overflow button is clicked.
selection-change
Fired when selection is changed by user interaction.
item
type: HTMLElement
description: the selected item.

MediaGalleryItem

Overview

The ui5-media-gallery-item web component represents the items displayed in the ui5-media-gallery web component.

Note: ui5-media-gallery-item is not supported when used outside of ui5-media-gallery.

Keyboard Handling

The ui5-media-gallery provides advanced keyboard handling. When focused, the user can use the following keyboard shortcuts in order to perform a navigation:
  • [SPACE/ENTER/RETURN] - Trigger ui5-click event

ES6 Module Import

import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js"; (comes with ui5-media-gallery)

Properties/Attributes

You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.

Name
Type
Default Value
Description
disabled
boolean
false
Defines whether the component is in disabled state.
layout
sap.ui.webc.fiori.types.MediaGalleryItemLayout
"Square"
Determines the layout of the item container.

Available options are:
  • Square
  • Wide
selected
boolean
false
Defines the selected state of the component.

Slots

This Element provides slot(s). This means it can display its child nodes.
Unless targeting the default slot, use the slot attribute to define the destination slot for each child.
Text, along with HTML Elements with no slot attribute, goes the the default slot.

Slot
Type
Description
default
HTMLElement
Defines the content of the component.
thumbnail
HTMLElement
Defines the content of the thumbnail.
Theme: Morning Horizon (Light) Evening Horizon (Dark) Horizon High Contrast Black Horizon High Contrast White Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel