ui/VirtualList

Unstyled virtual list components and behaviors to be customized by a theme or application.

import VirtualList from '@enact/ui/VirtualList';

Members

VirtualListComponent

An unstyled scrollable virtual list component with touch support.

import VirtualList from '@enact/ui/VirtualList';
Properties
itemSize
Number

Size of an item for the VirtualList.

Valid value is a number. If the direction for the list is vertical, itemSize means the height of an item. For horizontal, it means the width of an item.

Example:

<VirtualList itemSize={ri.scale(72)} />

VirtualGridListComponent

An unstyled scrollable virtual grid list component with touch support.

import {VirtualGridList} from '@enact/ui/VirtualList';
Properties

Size of an item for the VirtualGridList.

  • Valid value is an object that has minWidth and minHeight as properties.

Example:

<VirtualGridList
	itemSize={{
		minWidth: ri.scale(180),
		minHeight: ri.scale(270)
	}}
/>

VirtualListBaseComponent

The base version of the virtual list component.

import {VirtualListBase} from '@enact/ui/VirtualList';
Properties
itemRenderer
Function

The rendering function called for each item in the list.

Note: The list does not always render a component whenever its render function is called due to performance optimization.

Example:

renderItem = ({index, ...rest}) => {
	delete rest.data;

	return (
		<MyComponent index={index} {...rest} />
	);
}
clientSize
Object

Client size of the list; valid values are an object that has clientWidth and clientHeight.

dataSize
Number

The number of items of data the list contains.

Default: 0
direction
String

The layout direction of the list.

Valid values are:

  • 'horizontal', and

  • 'vertical'.

Default: 'vertical'
direction
String

The layout direction of the list.

Valid values are:

  • 'horizontal', and

  • 'vertical'.

Default: 'vertical'
spacing
Number

The spacing between items.

Default: 0

Type Definitions

gridListItemSizeShapeObject

The shape for the grid list item size in a list for VirtualGridList.

minWidth
Number

The minimum width of the grid list item.

minHeight
Number

The minimum height of the grid list item.

ArrayBooleanFunctionModuleNumberObjectString