Overhang

The Overhang node provides an information bar that is displayed at the top of a screen in many Roku apps

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

Overhang(props: IOverhangProps): JSX.Element

Description

The Overhang node provides an information bar that is displayed at the top of a screen in many Roku apps. The regions occupied by the overhang can be filled with either a solid color or a bitmap.

The overhang typically includes a logo, title, clock, and options indicator, all of which can be customized or hidden as needed.

Parameters

Name	Type	Description
`props`	IOverhangProps

Example

<overhang
    title="My Channel"
    logoUri="pkg:/images/logo.png"
    showClock={true}
    showOptions={true}
    optionsAvailable={true}
/>

Types

IOverhangProps

Properties for the Overhang node.

The Overhang node provides an information bar that is displayed at the top of a screen in many Roku apps. The regions occupied by the overhang can be filled with either a solid color or a bitmap.

Example

<Overhang
    title="My Channel"
    logoUri="pkg:/images/logo.png"
    showClock={true}
    showOptions={true}
    optionsAvailable={true}
/>

Name	Type	Description
`backgroundUri?`	`Uri`	Specifies the URI of a bitmap to be used to fill the overhang area. If both `color` and `backgroundUri` are set, the last one set is used.
`clockColor?`	`string`	Specifies the color of the clock text.
`clockText?`	`string`	Specifies an alternate string to be displayed in the location of the clock. If set to a non-empty string, the specified string is displayed in place of the clock. If set to an empty string, the clock is restored.
`color?`	`string`	Fills the overhang area with the specified color. If both `color` and `backgroundUri` are set, the last one set is used.
`height?`	`number`	Specifies the height of the Overhang region.
`leftDividerUri?`	`Uri`	Specifies the URI of a bitmap to be used as a divider between the logo and the title.
`leftDividerVertOffset?`	`number`	Specifies the vertical offset of the left divider position.
`logoBaselineOffset?`	`number`	Specifies an adjustment to the vertical position of the logo to allow alignment of the logo relative to the baseline of the options prompt.
`logoUri?`	`Uri`	Specifies the URI of a bitmap to be drawn on the left side of the overhang area. If both `logoUri` and `title` are set, the logo will appear to the left of the title, with an optional divider bitmap between them.
`optionsAvailable?`	`boolean`	Specifies whether or not the Options remote key is currently available. When true and `showOptions` is also true, the options prompt is displayed.
`optionsColor?`	`string`	Specifies the color of the options indicator when options are available.
`optionsDimColor?`	`string`	Specifies the color of the options indicator when options are not available.
`optionsIconColor?`	`string`	Specifies the tint color to be applied to the options icon when options are available.
`optionsIconDimColor?`	`string`	Specifies the tint color to be applied to the options icon when options are not available.
`optionsMaxWidth?`	`number`	Specifies the maximum width to which the `optionsText` text will be ellipsized. A value of 0.0 indicates no width restriction.
`optionsText?`	`string`	Specifies the text to be displayed next to the Options (*) symbol.
`rightDividerUri?`	`Uri`	Specifies the URI of a bitmap to be used as a divider between the clock and options prompt.
`rightDividerVertOffset?`	`number`	Specifies the vertical offset of the right divider position.
`showClock?`	`boolean`	Controls whether or not a clock is displayed on the right side of the overhang. The default value is based on the device clock format setting.
`showOptions?`	`boolean`	Controls whether or not the options prompt is displayed on the right side of the overhang. Note that `optionsAvailable` must also be set to true for the options prompt to be displayed.
`title?`	`string`	Specifies a text string to be displayed on the left side of the overhang area, to the right of the logo if `logoUri` is also specified.
`titleColor?`	`string`	Specifies the color of the title text.

Extends IGroupProps.

Updated about 6 hours ago

What’s Next

Panel

Did this page help you?