ListPanel

A panel component that displays a navigable list of items for the Roku Sliding Panels interface pattern

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

ListPanel(props: IListPanelProps): JSX.Element

Description

A panel component that displays a navigable list of items for the Roku Sliding Panels interface pattern.

The ListPanel component creates a managedListPanel SceneGraph component that automatically handles list and nextPanel properties internally:

• Children extending ArrayGrid (LabelList, MarkupList) are automatically assigned to list
• Children extending Panel are automatically assigned to nextPanel

Declare the list child before the panel child. The panel is matched to the row it was built for by consulting the list, so a panel declared first cannot be attributed to a row.

While an asynchronously supplied nextPanel is still the previous row's, ListPanel transiently overrides IFullPanelProps.selectButtonMovesPanelForward to stop the platform opening the stale panel, restoring it once the correct panel arrives.

This managed behavior simplifies the common pattern of defining a list and its associated next panel as JSX children rather than explicit property assignments.

Parameters

Example

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

// Using managed child assignment
<ListPanel
  showSectionLabels={true}
  onCreateNextPanelIndex={(index) => console.log(`Selected item: ${index}`)}
>
  <labelList content={items} /> // Automatically becomes list
  <DetailPanel /> // Automatically becomes nextPanel
</ListPanel>

Types

IListPanelProps

Properties for the ListPanel component.

ListPanel extends Panel to add a list of items that can be used to navigate to other panels using the Roku Sliding Panels pattern. The list can be a LabelList or MarkupList node, and supports the "Create Next Panel" mechanism for dynamic panel creation.

Extends IPanelProps.

IListPanelProps.nextPanel

A Panel node to be added to the parent PanelSet as the next panel. Setting this field adds the panel to the right of the current ListPanel.

When using the managed ListPanel component, children extending Panel are automatically assigned to this field.

IListPanelProps.onCreateNextPanelIndex

Fired when the "Create Next Panel" mechanism is triggered. The event value contains the index of the list item that triggered the panel creation.

This is the READ_ONLY createNextPanelIndex field from the SceneGraph ListPanel, exposed as an event handler for reactive usage.