TargetSet
TargetSet defines rectangular target regions for a TargetGroup
import { TargetSet } from "@roku-sdk/components";TargetSet(props: ITargetSetProps): JSX.ElementDescription
TargetSet defines rectangular target regions for a TargetGroup.
A TargetSet specifies an array of rectangles that define where items in a TargetGroup will be rendered, along with an optional focus index identifying which rectangle is treated as the focused region.
Multiple TargetSets can be used to animate between different layouts (e.g., focused vs. unfocused states) via the TargetGroup's animateToTargetSet field.
Parameters
| Name | Type | Description |
|---|---|---|
props | ITargetSetProps |
Example
<targetSet
targetRects={[
[0, -200, 1920, 200], // off-screen above
[0, 20, 1920, 200], // first visible
[0, 240, 1920, 200], // second visible
[0, 460, 1920, 400], // focused (larger)
[0, 880, 1920, 200], // fourth visible
[0, 1100, 1920, 200], // off-screen below
]}
focusIndex={3}
/>Types
ITargetSetProps
Properties for the TargetSet node.
TargetSet defines a set of rectangular target regions used by a TargetGroup node to position its items. Each rectangle specifies the location and size of a region that will be occupied by an item in the TargetGroup.
Example
<targetSet
targetRects={[
[0, 0, 400, 300],
[0, 320, 400, 200],
[0, 540, 400, 200],
]}
focusIndex={0}
/>| Name | Type | Description |
|---|---|---|
color? | string | If the TargetGroup using this TargetSet has its showTargetRects field set to true, the target rectangles will be drawn using this color. Typically only used for debugging. |
focusIndex? | number | Identifies the index of a targetRects element that will be treated as the region occupied by the focus item. See below. |
targetRects? | Rect2D[] | Specifies an array of rectangles that define the target regions used by a TargetGroup node. Each rectangle is specified as [x, y, width, height]. |
Extends INodeProps.
ITargetSetProps.focusIndex
Identifies the index of a targetRects element that will be treated as the region occupied by the focus item.
A value of -1 indicates that the TargetGroup's defaultTargetSetFocusIndex will be used instead.
Updated about 3 hours ago