@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
37 lines (36 loc) • 1.75 kB
JavaScript
'use client';
import '@ui5/webcomponents-fiori/dist/MediaGallery.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* The `MediaGallery` component allows the user to browse through multimedia items. Currently,
* the supported items are images and videos. The items should be defined using the `MediaGalleryItem`
* 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 `MediaGallery` 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
*
*
*
* `import "@ui5/webcomponents-fiori/dist/MediaGalleryItem.js";`
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*
* @since [1.1.0](https://github.com/SAP/ui5-webcomponents/releases/tag/v1.1.0) of __@ui5/webcomponents-fiori__.
*/
const MediaGallery = withWebComponent('ui5-media-gallery', ['layout', 'menuHorizontalAlign', 'menuVerticalAlign'], ['interactiveDisplayArea', 'showAllThumbnails'], [], ['display-area-click', 'overflow-click', 'selection-change']);
MediaGallery.displayName = 'MediaGallery';
export { MediaGallery };