LayoutGroup
A container node that automatically positions its child nodes in either a horizontal row or vertical column layout with configurable alignment and spacing
import { LayoutGroup } from "@roku-sdk/components";LayoutGroup(props: ILayoutGroupProps): ElementDescription
A container node that automatically positions its child nodes in either a horizontal row or vertical column layout with configurable alignment and spacing.
LayoutGroup simplifies the task of positioning nodes by automatically calculating and applying the proper translation to each child node based on the layoutDirection, alignment settings, and itemSpacings.
Alignment and Translation:
The horizAlignment and vertAlignment properties align children relative to the LayoutGroup's translation point (default [0, 0]). To center the LayoutGroup and its content on screen, you must set the translation to the desired center point.
For FHD (1920×1080) resolution:
- Horizontal center:
1920 / 2 = 960 - Vertical center:
1080 / 2 = 540
Parameters
| Name | Type | Description |
|---|---|---|
props | ILayoutGroupProps |
Return values
Returns Element.
Example
// Vertical layout with left-aligned children (default)
<layoutGroup
layoutDirection="vert"
itemSpacings={[20, 20, 20]}
>
<label text="Item 1" />
<label text="Item 2" />
<label text="Item 3" />
</layoutGroup>// Center a vertical layout on screen (FHD 1920×1080)
// translation must be set to screen center for alignment to work as expected
<layoutGroup
translation={[960, 540]}
layoutDirection="vert"
horizAlignment="center"
vertAlignment="center"
itemSpacings={[20, 20]}
>
<label text="Centered Item 1" />
<label text="Centered Item 2" />
<label text="Centered Item 3" />
</layoutGroup>// Horizontal layout centered at bottom of screen (FHD)
<layoutGroup
translation={[960, 980]}
layoutDirection="horiz"
horizAlignment="center"
vertAlignment="bottom"
itemSpacings={[30, 30]}
>
<poster width={100} height={100} />
<poster width={100} height={100} />
<poster width={100} height={100} />
</layoutGroup>Updated about 5 hours ago