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.

Parameters

Parameter
Type
Description

args

{ id: string; }

The arguments passed to the function.

args.id

string

The id of the element.

Returns

void

Last updated

Was this helpful?