Instance Component
Instances, when used in conjunction with components (opens in a new tab), provide a lightweight way to reuse parts of your app (also known as composition).
Instances are attached to a component, and will "instantiate" or "expand" the component at the location specified by the instance. Additional scope can be provided to the component using the scope property, which is available via {{scope}} within the component.
Properties
Visible
| Prop | isVisible |
|---|---|
| Type | boolean |
| Default | true |
Whether or not this node is visible.
Tooltip
| Prop | tooltip |
|---|---|
| Type | string |
| Default | undefined |
The tooltip text to display when hovered or focused over this node.
Top
| Prop | top |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the top side of the grid (grid-row-start).
Left
| Prop | left |
|---|---|
| Type | number |
| Default | 1 |
The position of the node from the left side of the grid (grid-column-start).
Width
| Prop | width |
|---|---|
| Type | string |
| Default | 128px |
The width of the node. When this node is in a grid layout, this should be done using unitless grid column units (specifying 4 will become grid-column-end: span 4). When this node is in a stack layout, the width must be specified using CSS units (e.g. 100px or 100%).
Min Width
| Prop | minWidth |
|---|---|
| Type | string |
| Default | none |
The minimum width of the node. When this node is in a grid layout, this property is ignored.
Max Width
| Prop | maxWidth |
|---|---|
| Type | string |
| Default | none |
The maximum width of the node. When this node is in a grid layout, this property is ignored.
Height
| Prop | height |
|---|---|
| Type | string |
| Default | 32px |
The height of the node. When this node is in a grid layout, this should be done using unitless grid row units (specifying 4 will become grid-row-end: span 4). When this node is in a stack layout, the height must be specified using CSS units (e.g. 100px or 100%).
Min Height
| Prop | minHeight |
|---|---|
| Type | string |
| Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Max Height
| Prop | maxHeight |
|---|---|
| Type | string |
| Default | none |
The minimum height of the node. When this node is in a grid layout, this property is ignored.
Index
| Prop | $index |
|---|---|
| Type | number |
| Default | 0 |
This instance's index when rendered in an iterator. Available as {{$index}} within the component.
Component Props
| Prop | $props |
|---|---|
| Type | object |
| Default | {} |
These values will be used by the underlying component