@ui5/webcomponents-react/wrappers/webComponents/MediaGallery/index.js

React Wrapper for UI5 Web Components and additional components

'use client';

import { withWebComponent } from '@ui5/webcomponents-react-base';
/**
 * 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! [MediaGallery UI5 Web Component Documentation](https://ui5.github.io/webcomponents/components/fiori/MediaGallery) | [Repository](https://github.com/UI5/webcomponents)
 *
 * @since [1.1.0](https://github.com/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 };