MarkupGrid

MarkupGrid is a generic grid class that can be used to display a set of items arranged in a 2D grid

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

MarkupGrid(props: IMarkupGridProps): JSX.Element

Description

MarkupGrid is a generic grid class that can be used to display a set of items arranged in a 2D grid. The content of each grid item is an instance of an XML component specified by the itemComponentName field.

The grid supports flexible layouts: simple uniform items, rows/columns with varying heights/widths, and fixed multi-cell spanning items. Items can be organized into labeled sections with horizontal dividers.

Parameters

Example

<markupGrid
    itemComponentName="MyGridItem"
    itemSize={[300, 200]}
    numColumns={3}
    content={gridContent}
    onItemFocused={(index) => setFocusedIndex(index)}
    onItemSelected={(index) => navigateToDetail(index)}
/>

Types

IMarkupGridProps

Properties for the MarkupGrid node.

MarkupGrid is a generic grid class that displays a set of items arranged in a 2D grid. The content of each grid item is an instance of an XML component specified by the itemComponentName field.

The number of columns in the MarkupGrid is fixed and the number of rows varies as items fill from left to right, then top to bottom. Layouts range from simple uniform item sizes to complex multi-row/column spanning with fixedLayout.

Grid items may be organized into sections demarcated by labelled horizontal divider lines between sections.

Example

<MarkupGrid
    itemComponentName="SimpleGridItem"
    itemSize={[240, 135]}
    numColumns={4}
    content={
        <contentNode>
            <contentNode HDPOSTERURL="pkg:/images/item1.jpg" title="Item 1" />
            <contentNode HDPOSTERURL="pkg:/images/item2.jpg" title="Item 2" />
        </contentNode>
    }
    onItemSelected={(index) => console.log(`Selected: ${index}`)}
/>

Extends IArrayGridProps.

IMarkupGridProps.content

Specifies the content for the grid.

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.

IMarkupGridProps.imageWellBitmapUri

Specifies the bitmap file to use to suggest where images would appear for empty grids and empty sections of grids.

Only set this field to specify a custom bitmap that differs in appearance from the default bitmap.

IMarkupGridProps.itemComponentName

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

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

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

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