UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

37 lines (36 loc) 1.75 kB
'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 };