HPanel

The HPanel is a dynamic container widget designed to hold two child widgets aligned horizontally. Featuring an adjustable splitter between the widgets, HPanel allows users to resize the width of the child widgets effortlessly.

TSX Example

src/main.tsx

import { WLabel } from "@cedro/ui/label.ui";
import { WHPanel } from "@cedro/ui/hpanel.ui";
import { WContainer } from "@cedro/ui/container.ui";
import { createWidget } from "@cedro/ui/widget.builder";

export default createWidget(
<WHPanel padding={5}>
<WContainer variant="contained" fixedSize={250}>
    <WLabel text="Left Widget" centerX centerY />
</WContainer>
<WContainer variant="contained">
    <WLabel text="Right Widget" centerX centerY />
</WContainer>
</WHPanel>
);

Key Features

• Horizontal Alignment: Holds two child widgets in a horizontal layout.

• Resizable Splitter: Includes a handle between the widgets for easy horizontal resizing, allowing dynamic adjustment of widget widths.

Implement the HPanel in your project for a responsive and user-friendly layout that enhances the flexibility and functionality of your application's design.

Properties

The HPanel widget inherits from Widget class → Has all Widget properties.

• leftContent: Widget → The left child widget.
• rightContent: Widget → The right child widget.
• leftWidth: number → The left widget size.
• rightWidth: number → The right widget size.

Constructor

Parameter	Type	Required	Description
id	string	yes	The id of the widget
parent	Widget	no	The parent of the widget. Default is null

TS Example

src/main.ts

import { HPanel } from "@cedro/ui";

const myPanel: HPanel = new HPanel("my-panel");

myPanel.setLeft(contentWidget1, 200);
myPanel.setRight(contenWidget2);

TSX Example

src/main.tsx

import { WHPanel } from "@cedro/ui";

<WHPanel id="my-panel">
    <ContentWidget1 fixedSize={200} />
    <ContentWidget2 />
</WHPanel>

Public Methods

setLeft

Set the left child widget.

Parameters

Parameter	Type	Required	Description
widget	Widget	yes	The left child widget.
fixWidth	number	no	The left child widget size. Default is null

Returns Value

void

Example

src/main.ts

myPanel.setLeft(contentWidget1, 200);

setRight

Set the right child widget.

Parameters

Parameter	Type	Required	Description
widget	Widget	yes	The right child widget.
fixWidth	number	no	The right child widget size. Default is null

Returns Value

void

Example

src/main.ts

myPanel.setRight(contentWidget2);