UIFlexibleSpaceElement

Represents a flexible space element in a container.

When rendered...

inside UIGridContainerElement, it will add extra gap between items. It can be controlled by grid property.
inside UIPanelElement body or footer, since they work as vertically stacks, it will add extra gap between items.

Examples

Paragraphs with a flexible space between makes them more visually separated.

{
  type: "Panel",
  body: [
    { type: "Paragraph", text: "Paragraph 1" },
    { type: "FlexibleSpace" },
    { type: "Paragraph", text: "Paragraph 2" },
  ],
}

Horizontal stack of buttons with a flexible space between makes them more visually separated.

{
  type: "Grid",
  grid: "auto-flow / auto 1fr auto",
  items: [
    { type: "Button", label: "Button 1", onClick: () => {} },
    { type: "FlexibleSpace" },
    { type: "Button", label: "Button 2", onClick: () => {} },
  ],
}

Properties

type

type: "FlexibleSpace"

id

id: string

The ID of the element.

onCreate()?

optional onCreate: (args: { id: string; }) => void

A function to call when the element is created.

Parameters

Parameter

Type

Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void

onDestroy()?

optional onDestroy: (args: { id: string; }) => void

A function to call when the element is destroyed.