Skip to content

Widget Component

The Widget component is a reusable container for displaying content with optional controls like collapse, fullscreen, and refresh.

Purpose and Utility

The Widget component is used to encapsulate content in a styled container with optional controls. It is highly customizable and supports features like:

  • Collapsible content.
  • Fullscreen mode.
  • Refresh functionality.
  • Custom headers and controls.

Example Usage

The Widget component is used in various pages, such as Dashboard and AlarmList, to display content in a structured format:

<template>
  <Widget title="Dashboard Overview">
    <p>Welcome to the dashboard!</p>
  </Widget>
</template>

Props

  • customHeader (Boolean): Whether to use a custom header. Default is false.
  • tooltipPlacement (String): Placement of tooltips. Default is 'top'.
  • showTooltip (Boolean): Whether to show tooltips. Default is false.
  • close (Boolean/String): Enables the close button. Default is false.
  • fullscreen (Boolean/String): Enables fullscreen mode. Default is false.
  • collapse (Boolean/String): Enables collapse functionality. Default is false.
  • settings (Boolean/String): Enables settings control. Default is false.
  • settingsInverse (Boolean): Enables inverse settings control. Default is false.
  • refresh (Boolean/String): Enables refresh functionality. Default is false.
  • className (String): Additional CSS classes for the widget. Default is ''.
  • title (String): The title of the widget. Default is ''.
  • customControls (String): Custom HTML for controls. Default is null.
  • bodyClass (String): Additional CSS classes for the widget body. Default is ''.
  • options (Object): Additional options for the widget. Default is {}.
  • fetchingData (Boolean): Whether the widget is in a loading state. Default is false.
  • showLoader (Boolean): Whether to show a loader during loading. Default is true.
  • collapsed (Boolean): Whether the widget is initially collapsed. Default is false.
  • autoload (Boolean/Number): Automatically loads data at intervals. Default is false.

Methods

  • closeWidget: Closes the widget.
  • changeState: Changes the widget's state (e.g., collapse, fullscreen).
  • loadWidgster: Emits a load event to refresh the widget's content.

Notes

  • The Widget component uses a Loader component to display a spinner during loading.
  • Custom controls can be added using the customControls prop.