Represents a flexible space element in a container.

When rendered...

• insideUIGridContainerElement, it will add extra gap between items. It can be controlled bygrid property.

• insideUIPanelElementbody orfooter, 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()?

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

A function to call when the element is created.

Parameters

Returns

void

onDestroy()?

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

A function to call when the element is destroyed.

Parameters

Returns

void

Last updated5 months ago