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

NameTypeDefault ValueDescription
widthnumber0The width of the list view. The default (0) allows the list to grow as needed.
heightnumber0The height of the list view. The default (0) allows the list to grow as needed.

Element Properties

NameTypeDescription
cursorEdgeScrollModestringSets the cursor edge scroll mode for this list view.
defaultItemAlignmentstringSets 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.
defaultItemPaddingvec4Sets 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.
orientationstringSets the orientation of this list view. The default orientation is Vertical.
scrollBarVisibilitystringSets the visibility mode of the scrollbars attached.
scrollingEnabledbooleanSets whether list view scrolling is enabled or not.
scrollSpeednumberSets the scroll speed in scene units per second.
scrollValuenumberSets the scroll content position manually with a normalized value between 0 and 1.
scrollToItemnumberSets the index of the item you would like to scroll to.
skipInvisibleItemsbooleanSkips 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.
itemAlignmentobjectSets the item alignment at the specified index.
itemPaddingobjectSets 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