Rectangle
Rectangle component for rendering solid colored rectangles
import { Rectangle } from "@roku-sdk/components";Rectangle(props: IRectangleProps): JSX.ElementDescription
Rectangle component for rendering solid colored rectangles.
Rectangle is a renderable node that draws a solid colored rectangle. It is one of the three basic renderable nodes in SceneGraph and is commonly used for backgrounds, borders, and simple UI elements.
Parameters
| Name | Type | Description |
|---|---|---|
props | IRectangleProps |
Example
<rectangle
width={400}
height={200}
color="#FF0000FF"
/>Types
IRectangleProps
Properties for the Rectangle node.
Rectangle is a renderable node that draws a solid colored rectangle. It is one of the three basic renderable nodes in SceneGraph and is commonly used for backgrounds, borders, and simple UI elements.
| Name | Type | Description |
|---|---|---|
blendingEnabled? | boolean | Specifies if the rectangle should be alpha blended with the nodes that are behind it. |
color? | string | Specifies the color of the rectangle (string containing hex value e.g. RGBA). |
effect? | Element | An Effect node to apply shader-based rendering (rounded corners, borders, gradients). On platforms that do not support effects, this is silently ignored. |
height? | ResType<number> | Specifies the height of rectangle in local coordinates. |
width? | ResType<number> | Specifies the width of the rectangle in local coordinates. |
Extends IGroupProps.
Updated about 3 hours ago
What’s Next
Did this page help you?