Version: latest

ListView

<Listview> on lumin

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 {
ListView,
ListViewItem,
Text,
Image,
View,
RectLayout,
ScrollBar,
Scene,
Prism
} from "magic-script-components";
export default class MyApp extends React.Component {
render() {
const contacts = [
{ name: 'Lorem Ipsum ', email: 'lorem@magicleap.com ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
{ name: 'Little Kitten ', email: 'kitten@magicleap.com', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' },
{ name: 'Lorem Ipsum 2 ', email: 'lorem@magicleap.com ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
{ name: 'Little Kitten 2', email: 'kitten@magicleap.com', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' },
{ name: 'Lorem Ipsum 3 ', email: 'lorem@magicleap.com ', image: require('../../resources/contact1.jpg'), phone: '(555)-123-1234' },
{ name: 'Little Kitten 3', email: 'kitten@magicleap.com', image: require('../../resources/contact2.jpg'), phone: '(555)-123-1234' }
];
return (
<Scene>
<Prism size={[1, 1, 0.2]} >
<View name="main-view" alignment={'center-center'}>
<ListView localPosition={[0, 0, 0]} width={0.7} height={0.5} defaultItemAlignment={'top-left'} defaultItemPadding={[0, 0, 0.01, 0]}>
<ScrollBar length={0.5} thumbSize={0.03} />
{contacts.map((contact, index) => (
<ListViewItem key={index}>
<RectLayout width={0.35} contentAlignment={'top-left'}>
<View>
<Image localPosition={[0, 0, 0]} height={0.17} width={0.17} filePath={contact.image} />
<Text localPosition={[0.2, 0.05, 0]} alignment={'center-left'} textSize={0.07} weight={"bold"} textColor={"#85D834"} >
{contact.name}
</Text>
<Text localPosition={[0.2, 0, 0]} alignment={'center-left'} textSize={0.05} textColor={"#e0e0e0"} >
{contact.email}
</Text>
<Text localPosition={[0.2, -0.05, 0]} alignment={'center-left'} textSize={0.05} textColor={"#B5B5B5"}>
{contact.phone}
</Text>
</View>
</RectLayout>
</ListViewItem>
))}
</ListView>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Create Properties

NameTypeDefault ValueRequiredDescription
widthnumber0NThe width of the list view. The default (0) allows the list to grow as needed.
heightnumber0NThe height of the list view. The default (0) allows the list to grow as needed.

Element Properties

NameTypeDefault ValueDescription
cursorEdgeScrollModestringn/aSets the cursor edge scroll mode for this list view.
defaultItemAlignmentstringtop-leftSets 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.
defaultItemPaddingvec4[0.0, 0.0, 0.0, 0.0]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.
orientationstringverticalSets the orientation of this list view. The default orientation is Vertical.
scrollBarVisibilitystringalwaysSets the visibility mode of the scrollbars attached.
scrollingEnabledbooleantrueSets whether list view scrolling is enabled or not.
scrollSpeednumber0.1Sets the scroll speed in scene units per second.
scrollValuenumber0Sets the scroll content position manually with a normalized value between 0 and 1.
scrollToItemnumbern/aSets the index of the item you would like to scroll to.
skipInvisibleItemsbooleanfalseSkips 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.
itemAlignmentobjectn/aSets the item alignment at the specified index.
itemPaddingobjectn/aSets 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