ListView

Description

The ListView is a scrollable, selectable list of items. It adds a background quad to the items, including padding. Items can be grouped in horizontal or vertical lists.

Example

import React from "react";

import {

ScrollBar,

ListView,

ListViewItem,

Text

} from "magic-script-components";

export default class MyApp extends React.Component {

render() {

const moons = [

"Europa",

"Ganymede",

"Io",

"Callisto",

"Valetudo",

"Amalthea",

"Metis",

"Ananke",

"Carme"

];

return (

<ListView localPosition={[-0.15, 0.25, 0]} width={0.5} height={0.5}>

<ScrollBar width={0.5} thumbSize={0.03} />

{moons.map((moon, index) => (

<ListViewItem>

<Text key={index} textSize={0.1}>

{moon}

</Text>

</ListViewItem>

))}

</ListView>

);

}

}

Common Events

Common Properties

Create Properties

Name	Type	Default Value	Description
width	number	0	The width of the list view. The default (0) allows the list to grow as needed.
height	number	0	The height of the list view. The default (0) allows the list to grow as needed.

Element Properties

Name	Type	Description
cursorEdgeScrollMode	string	Sets the cursor edge scroll mode for this list view.
defaultItemAlignment	string	Sets the default item alignment within the list. Default item alignments are TOP_LEFT. This is set for any new items that are added that don't explicitly specify alignment. The alignment of each individual item can be set later if needed.
defaultItemPadding	vec4	Sets the default padding of each item within the list, in scene units. The default is no padding (0,0,0,0). The padding order is: top, right, bottom, left. This is set for any new items that are added that don't explicitly specify padding. The padding of each individual item can be set later if needed.
orientation	string	Sets the orientation of this list view. The default orientation is Vertical.
scrollBarVisibility	string	Sets the visibility mode of the scrollbars attached.
scrollingEnabled	boolean	Sets whether list view scrolling is enabled or not.
scrollSpeed	number	Sets the scroll speed in scene units per second.
scrollValue	number	Sets the scroll content position manually with a normalized value between 0 and 1.
scrollToItem	number	Sets the index of the item you would like to scroll to.
skipInvisibleItems	boolean	Skips invisible items. Setting this value to true causes the layout to skip over any invisible items. The layout checks the visibility of each top-level item node added and, if invisible, along with inherited visibility, skips that node for layout.
itemAlignment	object	Sets the item alignment at the specified index.
itemPadding	object	Sets the item padding at the specified index.

itemAlignment

{

index: <number>,

alignment: <string>

}

itemPadding

{

index: <number>,

padding: <vec4>

}

cursorEdgeScrollMode options: CursorEdgeScrollMode

defaultItemAlignment options: Alignment

orientation options: Orientation

scrollBarVisibility options: ScrollBarVisibility

itemAlignment.alignment options: Alignment

Events

• onScrollChanged