LabelList

LabelList is a simple list class that displays a list of text items

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

LabelList(props: ILabelListProps): JSX.Element

Description

LabelList is a simple list class that displays a list of text items.

Each item can include a text string and an optional icon positioned to the left of the text string. List items can be organized into sections demarcated by labelled horizontal divider lines.

Default value for itemSize is [510, 72] for FHD mode, and [340, 48] for HD mode.

Parameters

Name	Type	Description
`props`	ILabelListProps

Example

<labelList
    itemSize={[440, 48]}
    textHorizAlign="left"
    color="0xddddddff"
    focusedColor="0x262626ff"
    content={
        <contentNode>
            <contentNode title="Drama" />
            <contentNode title="Action" />
            <contentNode title="Horror" />
            <contentNode title="Comedy" />
        </contentNode>
    }
    onItemSelected={(index) => console.log(`Selected: ${index}`)}
/>

<labelList
    itemSize={[440, 48]}
    content={
        <contentNode>
            <contentNode CONTENTTYPE="SECTION" title="Movies">
                <contentNode title="Drama" />
                <contentNode title="Action" />
            </contentNode>
            <contentNode CONTENTTYPE="SECTION" title="TV Shows">
                <contentNode title="Comedy" />
                <contentNode title="Drama" />
            </contentNode>
        </contentNode>
    }
/>

Description

Parameters

Example

What’s Next