Widget

A titled, collapsible container that groups related content under a header.

Installation

import {
  Widget,
  WidgetStack,
} from "@o/pipeline/experimental/components/widget";

Render mode

The mode prop controls how the widget toggles between its expanded and collapsed states:

collapsible (default)

Hello

Example: DataGrid

Name
Email
Phone
Address

custom

Override the default collapsible behavior to allow for a custom toggle event.

Example: MiniCardStack

  • Item 1 of 5
  • Item 2 of 5
  • Item 3 of 5
  • Item 4 of 5
  • Item 5 of 5

WidgetStack

Stack multiple widgets vertically with dividers between them:

Name
Email
Phone
Address
Name
Email
Phone
Address
Name
Email
Phone
Address