<ScenesWidget>

INFO

The <ScenesWidget> component must be used within a <Provider> component.

The <ScenesWidget> component is used to display a list of scenes and allows for customization of the content displayed for each scene. This component provides an easy way for users to view and manage multiple scenes.

Usage Example

Basic Version

In the basic version, you can directly use the <ScenesWidget> component, which by default displays the scene list without any additional customization:

<template>
    <ScenesWidget></ScenesWidget>
</template>

Custom Version

You can use slots to customize the display of each scene item. For example, you can customize the scene content and the empty state message:

<template>
    <ScenesWidget>
        <template #content="item">{{ item.props.title || item.title }}</template>
        <template #empty>No Data</template>
    </ScenesWidget>
</template>

Slot Explanation

• #content: Customizes the display content of each scene item. The item parameter contains the data for each scene, and typically you can access properties such as title or other scene-related attributes. In the example, item.props.title or item.title is used to display the scene title.
• #empty: Displays a message when there is no scene data.

Notes

• <Provider> component: The <ScenesWidget> must be contained within a <Provider> component to ensure the correct context and functional support.
• Slot Customization: Through the #content slot, you can flexibly customize the display of the scene list, including displaying specific fields or using custom components.
• Empty Data Message: By using the #empty slot, you can customize the message shown when there is no data, providing a better user experience.