@ui5/webcomponents-react
Version:
React Wrapper for UI5 Web Components and additional components
41 lines (40 loc) • 1.92 kB
JavaScript
'use client';
import '@ui5/webcomponents-fiori/dist/IllustratedMessage.js';
import { withWebComponent } from '../../internal/withWebComponent.js';
/**
* An IllustratedMessage is a recommended combination of a solution-oriented message, an engaging
* illustration, and conversational tone to better communicate an empty or a success state than just show
* a message alone.
*
* Each illustration has default internationalised title and subtitle texts. Also they can be managed with
* `titleText` and `subtitleText` properties.
*
* To display the desired illustration, use the `name` property, where you can find the list of all available illustrations.
*
* **Note:** By default the “BeforeSearch” illustration is loaded. To use other illustrations, make sure you import them in addition, for example:
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/NoData.js"`
*
* **Note:** Illustrations starting with the “Tnt” prefix are part of another illustration set. For example to use the “TntSuccess” illustration, add the following import::
*
* `import "@ui5/webcomponents-fiori/dist/illustrations/tnt/Success.js"`
*
* ### Structure
* The IllustratedMessage consists of the following elements, which are displayed below each other in the following order:
*
* - Illustration
* - Title
* - Subtitle
* - Actions
*
* ### Usage
* `IllustratedMessage` is meant to be used inside container component, for example a `ui5-card`,
* a `ui5-dialog` or a `Page`
*
*
*
* __Note__: This is a UI5 Web Component! [Repository](https://github.com/SAP/ui5-webcomponents) | [Documentation](https://sap.github.io/ui5-webcomponents/)
*/
const IllustratedMessage = withWebComponent('ui5-illustrated-message', ['accessibleNameRef', 'design', 'name', 'subtitleText', 'titleText'], [], ['subtitle', 'title'], []);
IllustratedMessage.displayName = 'IllustratedMessage';
export { IllustratedMessage };