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.
For the ui5-message-strip 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.
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"
Defines the color scheme of the component. There are 10 predefined schemes. To use one you can set a number from "1" to "10". The colorScheme"1" will be set by default.
Defines whether the MessageStrip will show an icon in the beginning. You can directly provide an icon with the icon slot. Otherwise, the default icon for the type will be used. * Note: If MessageStripDesign.ColorSet1 or MessageStripDesign.ColorSet2 value is set to the design property, default icon will not be presented.
Defines the text of the component. Note: Although this slot accepts HTML Elements, it is strongly recommended that you only use text in order to preserve the intended design.
Defines the content to be displayed as graphical element within the component. Note: If no icon is given, the default icon for the component type will be used. The SAP-icons font provides numerous options. See all the available icons in the Icon Explorer.