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
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()?
optional
onCreate: (args
: {id
:string
; }) =>void
A function to call when the element is created.
Parameters
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
args
{ id
: string
; }
The arguments passed to the function.
args.id
string
The id of the element.
Returns
void
Last updated
Was this helpful?