MarkupList

MarkupList is a generic list class that displays a vertical list of items, where the visual content of each item is an instance of an XML component specified by the itemComponentName field

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

MarkupList(props: IMarkupListProps): JSX.Element

Description

MarkupList is a generic list class that displays a vertical list of items, where the visual content of each item is an instance of an XML component specified by the itemComponentName field.

The item XML component receives injected fields (width, height, index, listHasFocus, itemContent, focusPercent, itemHasFocus) from the MarkupList, allowing BrightScript to customize item appearance as focus moves.

Parameters

Example

<markupList
    itemComponentName="MyListItem"
    itemSize={[440, 72]}
    numRows={8}
    content={listContent}
    onItemFocused={(index) => setFocusedIndex(index)}
    onItemSelected={(index) => navigateToDetail(index)}
/>

Types

IMarkupListProps

Properties for the MarkupList node.

MarkupList is a generic list class that displays a vertical list of items, where each item's appearance is defined by an XML component specified via itemComponentName. Item appearance as it enters/exits focus can be customized using BrightScript scripting in the item XML component.

List items can be organized into sections demarcated by labelled horizontal divider lines between them.

Example

<MarkupList
    itemComponentName="SimpleListItem"
    itemSize={[440, 72]}
    numRows={8}
    content={
        <contentNode>
            <contentNode title="Drama" HDPOSTERURL="pkg:/images/drama.jpg" />
            <contentNode title="Action" HDPOSTERURL="pkg:/images/action.jpg" />
        </contentNode>
    }
    onItemSelected={(index) => console.log(`Selected: ${index}`)}
/>

Extends IArrayGridProps.

IMarkupListProps.content

Specifies the content for the list.

Should be a single root ContentNode with one child ContentNode per item. If the data contains section markers (CONTENTTYPE="SECTION"), section dividers will be drawn between each section, optionally with an icon and/or label.

Important: Place content before jumpToItem and animateToItem in the component. When content is updated dynamically, update jumpToItem/animateToItem in the same transaction or after content has been updated.

IMarkupListProps.itemComponentName

Specifies the name of the compiled component used to render each list item.

Register the compiled component by importing its XML file before use:

import "./compiled-components/MyListItem.xml";

The compiled component may define interface fields that MarkupList will automatically update: width, height, index, listHasFocus, itemContent, focusPercent, and itemHasFocus.