<BlocksWidget>

INFO

The <BlocksWidget> component must be used within the <Provider> component.

The <BlocksWidget> component is used to display a list of modules, supporting both a basic version and a customizable version. It allows you to customize different parts of the content, improving flexibility and scalability of the interface.

Component Structure

The <BlocksWidget> component consists of the following main parts:

1. Header (Optional): Allows you to customize the title of each module.
2. Section Header (Optional): An optional section to display titles for module blocks.
3. Content (Optional): Displays the detailed content of the module.

Usage Example

Basic Version

In the simplest use case, the <BlocksWidget> component will automatically display the module list, suitable for scenarios where no custom content is needed:

<template>
    <BlocksWidget />
</template>

Customizable Version

In the customizable version, you can use slots to customize each part of the module. Below is an example where different parts are customized through slots:

<template>
    <BlocksWidget>
        <!-- Customize the Header section, display module title -->
        <template #header="item">
            {{ item.title }}
        </template>

        <!-- Customize the Section Header part -->
        <template #sectionHeader="item">
            <h2>{{ item.sectionTitle }}</h2>
        </template>

        <!-- Customize the Content part, display detailed module content -->
        <template #content="item">
            <p>{{ item.description }}</p>
        </template>
    </BlocksWidget>
</template>

Slot Description

• header slot: Customizes the title of each module. The item is the data object for each module, containing relevant information like title.
• sectionHeader slot: Customizes the section title for module blocks, typically used to separate different sections of modules.
• content slot: Customizes the detailed content display for the module. The item contains the detailed information of each module.

Configuration and Customization

You can further customize the appearance and behavior of <BlocksWidget> by passing additional props, events, or style classes to change the component's style and interaction logic.

Notes

• Ensure that the <BlocksWidget> component is always used within the <Provider> component, as it depends on the global state or functionality provided by the Provider.
• When using slots, you can choose to implement only the parts that need customization. Parts not defined will use the default display of the component.