Version: latest

ScrollView

<Scrollview> on lumin

Description

The ScrollView component represents a scrollable content view so objects, such as images or text, can overflow the viewable area. The ScrollView creates a 3D box that you specify a minimum and maximum corner that contains all of your content. The scroll bounds sets the viewable area (AABB) of the 3D box. Content outside the scroll bounds is clipped. You can scroll horizontally, vertically, or both. When scrolling, the cursor snaps to contents of the scroll view when gravity wells and snap are enabled.

By default, the scroll view is the size of your prism and scrolls vertically with a .5f scroll rate and a 2.0f activity duration.

Example

import React from "react";
import {
View,
ScrollView,
ScrollBar,
Text,
LinearLayout,
RectLayout,
Image,
Prism,
Scene
} 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' }
];
const aabb = {
min: [-0.3, -0.2, -0.3],
max: [0.3, 0.15, 0.3]
};
return (
<Scene>
<Prism size={[1, 1, 1]} >
<View name="main-view" alignment={'center-center'}>
<ScrollView scrollBarVisibility="auto" scrollBounds={aabb}>
<ScrollBar length={0.6} thumbSize={0.03} orientation="vertical" />
<LinearLayout
defaultItemAlignment="center-left"
orientation="vertical"
>
{contacts.map((contact, index) => (
<RectLayout key={contact.name} 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>
))}
</LinearLayout>
</ScrollView>
</View>
</Prism>
</Scene>
);
}
}

Common Events

Common Properties

Element Properties

NameTypeDefault ValueDescription
scrollBarVisibilitystringautoSets the visibility mode of any attached scrollbars. The visibility mode affects the visibility of any attached scroll bars.
scrollDirectionstringverticalSets the scroll direction for the scroll view. The default is vertical.
scrollMasknumbern/aApplies the texture resource as a mask for ScrollView content.
scrollOffsetvec3n/aSets the scroll content offset manually.
scrollSpeednumber0.1Sets the scroll speed in scene units per second.
scrollValuenumber0Sets the scroll content position manually with a normalized value between 0 and 1.
scrollBoundsobjectn/aSets the scroll bounds. The bounds are defined within the ScrollView's local coordinate system. The scroll bounds is used to both clip content visually and to automatically clamp content scrolling extents to stay within the bounds.

scrollBounds

{
min: <vec3>,
max: <vec3>
}

scrollBarVisibility options: ScrollBarVisibility

ScrollDirection options: ScrollDirection

Known Issues:

IOS: ScrollView, Remove extra space