StdDlgMultiStyleTextItem

Displays text with multiple styles in a StdDlgContentArea

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

StdDlgMultiStyleTextItem(props: IStdDlgMultiStyleTextItemProps): JSX.Element

Description

Displays text with multiple styles in a StdDlgContentArea.

Define named drawing styles and reference them as markup tags in the text content.

Parameters

Name	Type	Description
`props`	IStdDlgMultiStyleTextItemProps

Example

<stdDlgMultiStyleTextItem
    text="Press <key>OK</key> to <action>confirm</action>."
    drawingStyles={{
        key: { fontUri: "font:MediumBoldSystemFont", color: "0xFFFF00FF" },
        action: { fontUri: "font:MediumSystemFont", color: "0x00FF00FF" }
    }}
    audioGuideText="Press OK to confirm."
/>

Types

IStdDlgMultiStyleTextItemProps

Properties for the StdDlgMultiStyleTextItem component.

Enables text with multiple styles (fonts, colors, sizes) using markup tags that reference named drawing styles.

Name	Type	Description
`audioGuideText`	`string`	String spoken by the screen reader instead of the `text` field value.
`drawingStyles`	`object`	Named font styles. Each top-level key becomes a markup tag name usable in the `text` field.
`text?`	`string`	Text to display. Use markup tags referencing keys in `drawingStyles` to apply styles.

Extends IStdDlgItemBaseProps.

IStdDlgDrawingStyle

Drawing style for a named text style in StdDlgMultiStyleTextItem.

Name	Type	Description
`color?`	`string`	Text color in hex format (e.g., `"0xFF0000FF"`).
`fontSize?`	`ResType<number>`	Font size in points. Ignored when using system fonts.
`fontUri?`	`string`	TrueType/OpenType font file URI (e.g., `"pkg:/fonts/font.ttf"`) or a system font URI (e.g., `"font:MediumBoldSystemFont"`).