Title here
Summary here
Scrollable TextView
Role
With this page, you will know what are Scrollable TextView and how to use them.
Introduction
A Scrollable TextView is a View that contains a TextPrimitive. A Scrollable TextView is basically a View with vertical navigation.
Properties
- The number property pageHeight represents the visible height of one page.
- The number property margin is holding the margin value (in pixels) that will be substract to pageHeight when navigating.
- The number property currentPage holds the index of current visible page.
- The number property nbOfPages represents the number of pages available.
Style Properties
You can use all properties of a TextPrimitive to design the TextPrimitive inside the ScrollTextView.
Navigation behavior
ScrollTextView gets internal up/down/right/left/back API methods.
To navigate in the ScrollTextView, your screen should call for example:
up: function (key) { return this.scrollableTextView.up(); },
down: function (key) { return this.scrollableTextView.down(); },Example
import $View from "@View";
import $AbstractContent from "@AbstractContent";
import $TextPrimitive from "@TextPrimitive";
import $ScrollTextView from "@ScrollTextView";
export default $View.declare("FîpContentInfoView", {
properties: {
data: {class: $AbstractContent}
},
children: {
title: {
class: $TextPrimitive,
text: ({parent}) => parent.data.title
},
description: {
class: $ScrollTextView,
text: ({parent}) => parent.data.description,
margin: 20
}
},
style: {
height: 153,
title: {
size: 32,
height: 43,
width: 1000
},
description: {
y: 43,
width: ({parent}) => parent.theme.width / 4,
height: 110,
color: "#FF0000",
size: 16
},
},
methods: /** @lends FipContentInfoView.prototype */ {
up: function () {
return this.description.previous();
},
down: function () {
return this.description.next();
}
}
});Limitation
Caution
On Lightning rendering engine, very big text might not be rendered properly. Text are rendered as texture in Lightning 2. Lightning is trying to render all the text at once as the text is not paginated in this component. This will create a texture too big to be displayed leading to a black artifact.
API Reference
This UI component is part of Dana’s vendor named wtv-vendor-components which includes a JSdoc description.
See the component AbstractScrollTextView under views category of this components API.
Next
ScrollView