ui/ Virtual List
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
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
VirtualListBaseComponent
A basic base component for VirtualList and VirtualGridList.
import {VirtualListBase} from '@enact/ui/VirtualList';
Properties
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} /> ); }
A callback function that receives a reference to the
scrollTo
feature.Once received, the
scrollTo
method can be called as an imperative interface.The
scrollTo
function accepts the following parameters:{position: {x, y}} - Pixel value for x and/or y position
{align} - Where the scroll area should be aligned. Values are:
'left'
,'right'
,'top'
,'bottom'
,'topleft'
,'topright'
,'bottomleft'
, and'bottomright'
.{index} - Index of specific item. (
0
or positive integer) This option is available for onlyVirtualList
kind.{node} - Node to scroll into view
{animate} - When
true
, scroll occurs with animation. Whenfalse
, no animation occurs.{focus} - When
true
, attempts to focus item after scroll. Only valid when scrolling byindex
ornode
.Note: Only specify one of:
position
,align
,index
ornode
Example:
// If you set cbScrollTo prop like below; cbScrollTo: (fn) => {this.scrollTo = fn;} // You can simply call like below; this.scrollTo({align: 'top'}); // scroll to the top
Additional props included in the object passed to the
itemsRenderer
callback.Client size of the list; valid values are an object that has
clientWidth
andclientHeight
.Activates the component for voice control.
The voice control group label.
The number of items of data the list contains.
Default: 0The layout direction of the list.
Valid values are:
'horizontal'
, and'vertical'
.
Default: 'vertical'Specifies how to show horizontal scrollbar.
Valid values are:
'auto'
,'visible'
, and'hidden'
.
Default: 'auto'Prevents scroll by wheeling on the list.
Default: falseCalled when scrolling.
Passes
scrollLeft
,scrollTop
, andmoreInfo
. It is not recommended to set this prop since it can cause performance degradation. UseonScrollStart
oronScrollStop
instead.Called when scroll starts.
Passes
scrollLeft
,scrollTop
, andmoreInfo
. You can get firstVisibleIndex and lastVisibleIndex from VirtualList withmoreInfo
.Example:
onScrollStart = ({scrollLeft, scrollTop, moreInfo}) => { const {firstVisibleIndex, lastVisibleIndex} = moreInfo; // do something with firstVisibleIndex and lastVisibleIndex } render = () => ( <VirtualList ... onScrollStart={this.onScrollStart} ... /> )
Called when scroll stops.
Passes
scrollLeft
,scrollTop
, andmoreInfo
. You can get firstVisibleIndex and lastVisibleIndex from VirtualList withmoreInfo
.Example:
onScrollStop = ({scrollLeft, scrollTop, moreInfo}) => { const {firstVisibleIndex, lastVisibleIndex} = moreInfo; // do something with firstVisibleIndex and lastVisibleIndex } render = () => ( <VirtualList ... onScrollStop={this.onScrollStop} ... /> )
The spacing between items.
Default: 0Specifies how to show vertical scrollbar.
Valid values are:
'auto'
,'visible'
, and'hidden'
.
Default: 'auto'
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.
itemSizesShapeObject
The shape for the list different item size in a list for VirtualList.
- minSize •
- Number
The minimum size of the list item.
- size •
- ArrayNumber
An array of the list item size. If it is not defined, the list items will render with the
minSize
size.