StdDlgGraphicItem

Displays an image with optional text in a StdDlgContentArea

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

StdDlgGraphicItem(props: IStdDlgGraphicItemProps): JSX.Element

Description

Displays an image with optional text in a StdDlgContentArea.

Parameters

Name	Type	Description
`props`	IStdDlgGraphicItemProps

Example

<stdDlgGraphicItem
    graphicUri="pkg:/images/info-icon.png"
    graphicWidth={48}
    graphicHeight={48}
    graphicAlign="left"
    text="Your device is up to date."
/>

Types

IStdDlgGraphicItemProps

Properties for the StdDlgGraphicItem component.

Displays an image with an optional text label positioned to the left, right, above, or below.

Name	Type	Description
`graphicAlign?`	`IStdDlgGraphicAlign`	See below.
`graphicHeight?`	`number`	Height override for the image (instead of its actual height).
`graphicUri?`	`Uri`	URI of the image to display.
`graphicWidth?`	`number`	Width override for the image (instead of its actual width).
`text?`	`string`	Text displayed next to the graphic. Wraps if too wide.

Extends IStdDlgItemBaseProps.

IStdDlgGraphicItemProps.graphicAlign

Relative position of the graphic and text.

"left": graphic left, text right
"right": graphic right, text left
"center_below": graphic below text, both centered
"center_above": graphic above text, both centered

IStdDlgGraphicAlign

Graphic/text alignment for StdDlgGraphicItem.

type IStdDlgGraphicAlign = "left" | "right" | "center_below" | "center_above";