StdDlgSideCardArea
Freeform side card area on the left or right side of a StandardDialog
import { StdDlgSideCardArea } from "@roku-sdk/components";StdDlgSideCardArea(props: IStdDlgSideCardAreaProps): JSX.ElementDescription
Freeform side card area on the left or right side of a StandardDialog.
Use for decorative images or annotative text. The side card area never gains key focus. A dialog may contain only a single side card area.
Parameters
| Name | Type | Description |
|---|---|---|
props | IStdDlgSideCardAreaProps |
Example
<stdDlgSideCardArea width={300} horizAlign="right" showDivider={true}>
<poster uri="pkg:/images/promo.jpg" width={280} height={400} />
</stdDlgSideCardArea>Types
IStdDlgSideCardAreaProps
Properties for the StdDlgSideCardArea component.
A freeform area on the left or right side of the dialog for decorative images or annotative text. The side card area never gains key focus.
| Name | Type | Description |
|---|---|---|
extendToDialogEdge? | boolean | Whether the area extends to the dialog's background image edge (true) or respects 9-patch margins (false). |
horizAlign? | "left" | "right" | Which side of the dialog the area appears on. |
showDivider? | boolean | Whether a thin vertical divider line is displayed between the side card and the main content column. |
width | number | Width of the side card area. When 0, defaults to the width of the content area's bounding rectangle. |
Extends IStdDlgAreaBaseProps.
Updated about 3 hours ago
What’s Next
Did this page help you?