ScrollableText
ScrollableText component for displaying vertically scrolling text content
import { ScrollableText } from "@roku-sdk/components";ScrollableText(props: IScrollableTextProps): JSX.ElementDescription
ScrollableText component for displaying vertically scrolling text content.
Use ScrollableText when you need to display large amounts of text that may not fit within the visible area, such as:
- License agreements
- Terms of service
- Long descriptions
- Help documentation
The component automatically shows a scrollbar when the text exceeds the specified height, and users can scroll using the remote's up/down arrow keys.
Parameters
| Name | Type | Description |
|---|---|---|
props | IScrollableTextProps |
Example
import { SystemFont } from "@roku-sdk/components";
// Basic scrollable text panel
<scrollableText
text="This is a very long piece of text that will scroll..."
width={800}
height={400}
font={SystemFont.Medium}
color="#FFFFFFFF"
/>// With custom scrollbar appearance
<scrollableText
text={licenseText}
width={1000}
height={500}
lineSpacing={12}
scrollbarTrackBitmapUri="pkg:/images/scrollbar-track.9.png"
scrollbarThumbBitmapUri="pkg:/images/scrollbar-thumb.9.png"
/>// Centered text alignment
<scrollableText
text="Centered scrollable content"
width={600}
height={300}
horizAlign="center"
vertAlign="top"
/>Types
IScrollableTextProps
Properties for the ScrollableText node.
ScrollableText provides an interactive, vertically scrolling pane of text. This is typically used to display several paragraphs of text that are too long to fit onto the display, such as license agreements or detailed descriptions.
Key Features:
- Automatic scrollbar when text exceeds the specified height
- User can scroll using remote's up/down arrow keys
- Customizable scrollbar appearance
- Text alignment control (horizontal and vertical)
Example
<ScrollableText
text="Long text content here..."
width={800}
height={400}
font={SystemFont.Medium}
/>| Name | Type | Description |
|---|---|---|
color? | string | Specifies the text color as a hex value (e.g., 0xRRGGBBAA or #RRGGBBAA). |
font? | FontValue | Specifies the Font node to be used for rendering the text. Can be a system font enum value or a custom font URI string. |
height? | number | Specifies the height of the node in local coordinates. If the text to be displayed is larger than this height, a scrollbar is automatically added on the right, allowing users to scroll up and down using the remote's arrow keys. |
horizAlign? | HorizAlign | Specifies the horizontal alignment of the text within the computed width. See below. |
lineSpacing? | number | If the text is displayed on more than one line, specifies the amount of additional space added between lines (in pixels). |
scrollbarThumbBitmapUri? | Uri | Specifies the URI of an image file to replace the default scrollbar thumb. This should be a 9-patch image so that it can be stretched to the appropriate size based on content length. |
scrollbarTrackBitmapUri? | Uri | Specifies the URI of an image file to replace the default scrollbar track. This should be a 9-patch image so that it can be stretched to the appropriate height specified by the height field. |
text? | string | Specifies the text to be displayed. |
vertAlign? | VertAlign | Specifies the vertical alignment of the text within the specified height. See below. |
width? | number | Specifies the width of the node in local coordinates. This includes both the area where the text is rendered and the scrollbar on the right. |
Extends IGroupProps.
IScrollableTextProps.horizAlign
Specifies the horizontal alignment of the text within the computed width. The computed width is the width field value minus the scrollbar width.
"left": Left edge of text is drawn at x=0"center": Horizontal center of each line is at half the computed width"right": Right edge of each line is at the computed width
In most cases, this should remain set to "left".
IScrollableTextProps.vertAlign
Specifies the vertical alignment of the text within the specified height.
"top": Top edge of text is drawn at y=0"center": Vertical center of text is at half the height"bottom": Bottom edge of text is at the height
In most cases, this should remain set to "top".
Updated about 3 hours ago