UNPKG

@ui5/webcomponents-react

Version:

React Wrapper for UI5 Web Components and additional components

30 lines (29 loc) 1.53 kB
'use client'; import '@ui5/webcomponents/dist/MessageStrip.js'; import { withWebComponent } from '../../internal/withWebComponent.js'; /** * The ui5-message-strip component allows for the embedding of application-related messages. * It supports four semantic designs, each with its own color and icon: "Information", "Positive", "Critical", and "Negative". * Additionally, users can choose from two color sets ("ColorSet1" and "ColorSet2"), each containing 10 predefined color schemes. * Each message shows a "Close" button, so that it can be removed from the UI, if needed. * * ### Usage * * For the `MessageStrip` component, you can define whether it displays * an icon in the beginning and a close button. Moreover, its size and background * can be controlled with CSS. * * ### Keyboard Handling * * #### Fast Navigation * This component provides a build in fast navigation group which can be used via [F6] / [Shift] + [F6] / [Ctrl] + [Alt/Option] / [Down] or [Ctrl] + [Alt/Option] + [Up]. * In order to use this functionality, you need to import the following module: * `import "@ui5/webcomponents-base/dist/features/F6Navigation.js"` * * * * __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/) */ const MessageStrip = withWebComponent('ui5-message-strip', ['colorScheme', 'design'], ['hideCloseButton', 'hideIcon'], ['icon'], ['close']); MessageStrip.displayName = 'MessageStrip'; export { MessageStrip };