LayoutCustomConfig interface
Define the arrangement of components on the screen.
Signature:
export interface LayoutCustomConfig
Remarks
One and only one of flexRatio or anchor must be set (except for in the root element).
If anchor is set then pivot, offset, and size must be set as well.
The value of aspectRatio is only used if flexRatio is set, if it is not set then the element will scale in both directions to fill the available space.
Example 1
One component occupying the full screen
{
id: 'main'
}
Example 2
Using flexRatio to arranged 2 components side by side with the right one being twice as wide as the left one
{
childrenFlexDirection: o3h.Layout.Direction.Horizontal,
children: [
{
id: 'left',
flexRatio: 1
},
{
id: 'right',
flexRatio: 2
}
]
}
Example 3
Using anchor to float a pip component over a full screen component
{
id: 'main',
children: [
{
id: 'pip',
anchor: o3h.Layout.Position.TopLeft,
pivot: o3h.Layout.Position.TopLeft,
offset: {
x: 0.1,
y: -0.1
},
size: {
x: 0.25,
y: 0.25
}
}
]
}
Properties
Property | Modifiers | Type | Description |
---|---|---|---|
anchor? | readonly | Enum<typeof LayoutPosition> | (Optional) The position of the parent layout element the offset is relative to. |
aspectRatio? | readonly | number | (Optional) Modify the size of the direction opposite to the one controlled by the flexRatio to maintain this aspect ratio. |
children? | readonly | readonly LayoutCustomConfig[] | (Optional) The layout elements which nest inside this layout element |
childrenFlexDirection? | readonly | Enum<typeof LayoutDirection> | (Optional) The direction children will be laid out side by in, required if any children have a flexRatio value |
displayAboveModule? | readonly | boolean | (Optional) If this is true, this element will be displayed on top of the module's web view. |
flexRatio? | readonly | number | (Optional) Value used relative to sibling objects defining the same property to determine what fraction of the layout each takes up. |
id? | readonly | string | (Optional) The unique identifier within the layout of this element, required to attach a component to the layout |
offset? | readonly | Vector2 | (Optional) The distance as a fraction of the size of the parent between the anchor position of this layout element and its parent's. |
pivot? | readonly | Enum<typeof LayoutPosition> | (Optional) The position of this layout element at the size expands from. |
size? | readonly | Vector2 | (Optional) The size of the layout element as a fraction of the size of the parent. |
LayoutCustomConfig.anchor property
The position of the parent layout element the offset is relative to.
Signature:
readonly anchor?: Enum<typeof LayoutPosition>;
LayoutCustomConfig.aspectRatio property
Modify the size of the direction opposite to the one controlled by the flexRatio to maintain this aspect ratio.
Signature:
readonly aspectRatio?: number;
LayoutCustomConfig.children property
The layout elements which nest inside this layout element
Signature:
readonly children?: readonly LayoutCustomConfig[];
LayoutCustomConfig.childrenFlexDirection property
The direction children will be laid out side by in, required if any children have a flexRatio value
Signature:
readonly childrenFlexDirection?: Enum<typeof LayoutDirection>;
LayoutCustomConfig.displayAboveModule property
If this is true, this element will be displayed on top of the module's web view.
Signature:
readonly displayAboveModule?: boolean;
Remarks
The default value of this property is false, i.e. elements are displayed below the web view by default.
If this is set to true the module will still receive touch events in the space occupied by the element.
The value of this property, if set, is inherited by child elements that have not specified their own value.
LayoutCustomConfig.flexRatio property
Value used relative to sibling objects defining the same property to determine what fraction of the layout each takes up.
Signature:
readonly flexRatio?: number;
LayoutCustomConfig.id property
The unique identifier within the layout of this element, required to attach a component to the layout
Signature:
readonly id?: string;
LayoutCustomConfig.offset property
The distance as a fraction of the size of the parent between the anchor position of this layout element and its parent's.
Signature:
readonly offset?: Vector2;
LayoutCustomConfig.pivot property
The position of this layout element at the size expands from.
Signature:
readonly pivot?: Enum<typeof LayoutPosition>;
LayoutCustomConfig.size property
The size of the layout element as a fraction of the size of the parent.
Signature:
readonly size?: Vector2;
Updated 7 months ago