enact logoEnact
Edit on GitHub

moonstone/VirtualList

Provides Moonstone-themed virtual list components and behaviors.

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

Members

VirtualListComponent

A Moonstone-styled scrollable and spottable virtual list component.

import VirtualList from '@enact/moonstone/VirtualList';
Properties
itemSize •
Numberui/VirtualList.itemSizesShape

Size of an item for the VirtualList; valid value is a number generally. For different item size, value is an object that has minSize and size as properties. If the direction for the list is vertical, itemSize means the height of an item. For horizontal, it means the width of an item.

Usage:

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

VirtualGridListComponent

A Moonstone-styled scrollable and spottable virtual grid list component.

import {VirtualGridList} from '@enact/moonstone/VirtualList';
Properties
itemSize •
ui/VirtualList.gridListItemSizeShape

Size of an item for the VirtualGridList; valid value is an object that has minWidth and minHeight as properties.

Usage:

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

VirtualListBaseComponent

A Moonstone-styled base component for VirtualList and VirtualGridList.

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

The render 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.

Usage:

renderItem = ({index, ...rest}) => {
	return (
		<MyComponent index={index} {...rest} />
	);
}
data-webos-voice-disabled
Boolean

Disable voice control feature of component.

data-webos-voice-focused
Boolean

Activates the component for voice control.

data-webos-voice-group-label
String

The voice control group label.

dataSize
Number

Size of the data.

Default: 0
focusableScrollbar
Boolean

Allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.

Default: false
focusableScrollbar
Boolean

Allows 5-way navigation to the scrollbar controls. By default, 5-way will not move focus to the scrollbar controls.

Default: false
id
String

Unique identifier for the component.

When defined and when the VirtualList is within a Panel, the VirtualList will store its scroll position and restore that position when returning to the Panel.

role
String

The ARIA role for the list.

Default: 'list'
scrollDownAriaLabel
String

Sets the hint string read when focusing the next button in the vertical scroll bar.

Default: $L('scroll down')
scrollLeftAriaLabel
String

Sets the hint string read when focusing the previous button in the horizontal scroll bar.

Default: $L('scroll left')
scrollRightAriaLabel
String

Sets the hint string read when focusing the next button in the horizontal scroll bar.

Default: $L('scroll right')
scrollUpAriaLabel
String

Sets the hint string read when focusing the previous button in the vertical scroll bar.

Default: $L('scroll up')
spacing
Number

Spacing between items.

Default: 0
wrap
BooleanString

When it's true and the spotlight focus cannot move to the given direction anymore by 5-way keys, a list is scrolled with an animation to the other side and the spotlight focus moves in wraparound manner.

When it's 'noAnimation', the spotlight focus moves in wraparound manner as same as when it's true except that a list is scrolled without an animation.

Default: false
ArrayBooleanFunctionModuleNumberObjectString