MultiStyleLabel

MultiStyleLabel component for displaying text with mixed styles

import { MultiStyleLabel } from "@roku-sdk/components";

MultiStyleLabel(props: IMultiStyleLabelProps): JSX.Element

Description

MultiStyleLabel component for displaying text with mixed styles.

The MultiStyleLabel node allows different fonts, sizes, and colors to be combined within the same text block using simple markup syntax. Define styles in drawingStyles and reference them by name as XML-like tags in the text content.

Parameters

Name	Type	Description
`props`	IMultiStyleLabelProps

Example

<multiStyleLabel
    text="Welcome to <appName>My App</appName>! Press <key>OK</key> to continue."
    width={600}
    wrap={true}
    drawingStyles={{
        appName: { fontUri: "font:LargeBoldSystemFont", color: "#00FF00FF" },
        key: { fontUri: "font:MediumBoldSystemFont", color: "#FFFF00FF" }
    }}
/>

Types

IMultiStyleLabelProps

Properties for the MultiStyleLabel node.

MultiStyleLabel is used to create labels with mixed styles, allowing different fonts, sizes, and colors within the same text block. Styles are defined in the drawingStyles property and applied using markup tags in the text content.

Name	Type	Description
`drawingStyles?`	`object`	Defines named font styles that can be applied to portions of the text. Each key becomes a markup tag name that can be used in the text property.

Extends ILabelBaseProps.

DrawingStyle

Defines the font styling properties for a named style in MultiStyleLabel.

DrawingStyle specifies the size, URI, and color of a font style that can be referenced by name in the MultiStyleLabel's text content using markup tags.

Name	Type	Description
`color?`	`string`	Specifies the text color in hex format (e.g., "#FF0000FF" for red).
`fontSize?`	`number`	Specifies the size of the font in points. Note: This value is ignored when using system fonts.
`fontUri?`	`string`	Specifies a TrueType/OpenType font file (e.g., "pkg:/fonts/font.ttf") or a system font URI (e.g., "font:MediumBoldSystemFont").