PanelSet

PanelSet is a Group node subclass that provides the panel sliding behavior seen in the Roku home screen

import { PanelSet } from "@roku-sdk/components";

PanelSet(props: IPanelSetProps): JSX.Element

Description

PanelSet is a Group node subclass that provides the panel sliding behavior seen in the Roku home screen. It manages child Panel nodes and implements left/right panel sliding behavior.

In most cases, a PanelSet displays two Panel nodes: one on the left side (the "left panel") and one on the right side (the "right panel"). The panels slide left or right depending on user input, creating a navigation experience similar to the Roku OS.

Parameters

Example

Basic PanelSet with narrow and wide panels:

<panelSet width={1280} height={605}>
  <panel panelSize="narrow" leftOnly={true}>
    <label text="Menu" translation={[50, 50]} />
  </panel>
  <panel panelSize="wide">
    <label text="Details" translation={[50, 50]} />
  </panel>
</panelSet>

PanelSet with event handlers:

<panelSet
  width={1920}
  height={880}
  slideDuration={300}
  onIsGoingBack={(e) => console.log("Going back:", e.value)}
  onNumPanels={(e) => console.log("Panel count:", e.value)}
>
  <panel panelSize="medium">
    {/* Panel content */}
  </panel>
  <panel panelSize="medium">
    {/* Panel content */}
  </panel>
</panelSet>

Types

IPanelSetProps

Properties for the PanelSet component.

PanelSet extends Group and provides the panel sliding behavior seen in the Roku home screen. It manages the position of child Panel nodes and implements left/right panel sliding behavior. When a Left or Back key is pressed, the panels slide to the right, back towards their original home position. When a Right key is pressed, the panels slide left, and panels that slide off the right side of the display are automatically removed from the PanelSet.

Example

import { PanelSet, Panel, Label } from "@roku-sdk/components";

<PanelSet width={1280} height={605} slideDuration={500}>
  <Panel panelSize="narrow" leftOnly={true}>
    <Label text="Navigation Menu" translation={[50, 50]} />
  </Panel>
  <Panel panelSize="wide" isFullScreen={false}>
    <Label text="Content Panel" translation={[50, 50]} />
  </Panel>
</PanelSet>

Extends IGroupProps.