WEBRAD / TECHNICAL REFERENCE

Panel

Container with a background, borders, image, and progress outline.

WebPanelContainersVisual4 events

Quick start

Add Panel1 in the Designer. Use the example in a page method.

Panel1.caption = 'Processing';
Panel1.backgroundImage = 'assets/imported/background.jpg';
Panel1.backgroundSize = 'cover';
Panel1.backgroundPosition = 'center';
Panel1.backgroundRepeat = 'no-repeat';
Panel1.progressEnabled = true;
Panel1.progressValue = 42;
Panel1.show();

Drag children into the Panel and choose a layout in the Inspector.
caption identifies the container for accessibility. Use a Label to display a title.
Background image: backgroundImage, backgroundSize, backgroundPosition, and backgroundRepeat.
The progress outline appears with progressEnabled = true and progressValue between 0 and 100, excluding the endpoints.
To overlay content, use placement = 'floating' and configure anchors.

More examples

Progress outline and background image

Panel1.progressEnabled = true;
Panel1.progressValue = 0; // The outline is hidden at 0 and 100.
Panel1.progressValue = 50; // Values are clamped to 0..100.
Panel1.backgroundSize = 'contain'; // cover | contain | auto | stretch
Panel1.backgroundPosition = 'center';
Panel1.backgroundRepeat = 'repeat-x'; // no-repeat | repeat | repeat-x | repeat-y
// The caption is accessible Panel metadata, not an automatically displayed title.

Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

Property / source	Type and options	Default	Runtime access
`name`Name · Identity	`string`	`—`	name
`x`Left · Size & position	`number`	`0`	x
`y`Top · Size & position	`number`	`0`	y
`width`Width · Size & position	`number`	`240`	width
`height`Height · Size & positionA fixed aspect ratio derives height from width. Choose none to edit the saved height rules.	`number`	`160`	heightConditional availability in the Inspector
`itemWidth`Responsive width · Responsive sizeFit content grows the item to its widest rendered child and preserves child intrinsic widths; minimum and maximum width remain limits.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configuration
`itemHeight`Responsive height · Responsive sizeA fixed aspect ratio derives height from width. Choose none to edit the saved height rules.	`enumfixed` `stretch` `fit-content`	`"fixed"`	Inspector / configurationConditional availability in the Inspector
`itemMinWidth`Minimum width · Responsive size	`number`	`0`	Inspector / configuration
`itemMaxWidth`Maximum width · Responsive size	`number`	`null`	Inspector / configuration
`itemMinHeight`Minimum height · Responsive sizeA fixed aspect ratio derives height from width. Choose none to edit the saved height rules.	`number`	`0`	Inspector / configurationConditional availability in the Inspector
`itemMaxHeight`Maximum height · Responsive sizeA fixed aspect ratio derives height from width. Choose none to edit the saved height rules.	`number`	`null`	Inspector / configurationConditional availability in the Inspector
`itemGrow`Grow · Responsive size	`number`	`0`	Inspector / configuration
`itemShrink`Shrink · Responsive sizeAllows fixed and stretch flow items to yield space. Fit-content keeps its intrinsic size so its children are not compressed.	`boolean`	`true`	Inspector / configuration
`itemAlignSelf`Item alignment · Responsive sizeCross-axis alignment for this item in a row or column. Auto inherits the parent alignment; responsive cross-axis stretch retains its sizing behavior.	`enumauto` `start` `center` `end` `stretch`	`"auto"`	Inspector / configuration
`itemHorizontalAnchor`Horizontal anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemVerticalAnchor`Vertical anchor · Anchors & offsets	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`itemLeft`Left inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemRight`Right inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemTop`Top inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`itemBottom`Bottom inset · Anchors & offsets	`number`	`0`	Inspector / configuration
`margin`Margin · SpacingOuter spacing on all four sides, in pixels. Row and column layouts include this spacing between components.	`number`	`0`	margin
`marginTop`Margin top · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginTop
`marginRight`Margin right · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginRight
`marginBottom`Margin bottom · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginBottom
`marginLeft`Margin left · SpacingOuter spacing on this side, in pixels. Overrides the shared Margin value.	`number`	`0`Derived from saved properties	marginLeft
`visible`Visible · Behavior	`boolean`	`true`	visible
`collapseWhenHidden`Collapse when hidden · BehaviorRemoves the component from the layout while it is not visible.	`boolean`	`true`	collapseWhenHidden
`enabled`Enabled · Behavior	`boolean`	`true`	enabled
`aspectRatio`Aspect ratio · Size & positionnone allows free dimensions. A fixed ratio derives height from the responsive width.	`enumnone` `1:1` `4:3` `3:4` `16:9` `9:16`	`"none"`	aspectRatio
`containerMode`Container layout · Children layout	`enumfixed` `align-to-parent` `row` `column`	`"fixed"`	Inspector / configuration
`containerPaddingTop`Padding top · Children layout	`number`	`0`	Inspector / configuration
`containerPaddingRight`Padding right · Children layout	`number`	`0`	Inspector / configuration
`containerPaddingBottom`Padding bottom · Children layout	`number`	`0`	Inspector / configuration
`containerPaddingLeft`Padding left · Children layout	`number`	`0`	Inspector / configuration
`containerGap`Gap · Children layout	`number`	`0`	Inspector / configuration
`containerWrap`Wrap · Children layout	`boolean`	`false`	Inspector / configuration
`containerJustifyContent`Justify content · Children layout	`enumstart` `center` `end` `space-between` `space-around`	`"start"`	Inspector / configuration
`containerAlignItems`Default alignment · Children layoutDefault cross-axis alignment for children. Each child can override it with Item alignment.	`enumstart` `center` `end` `stretch`	`"start"`	Inspector / configuration
`caption`Caption · Appearance	`string`	`""`	caption
`placement`Placement · Floating placementFloating Panels overlay page content and move with page scrolling without consuming layout space.	`enumin-flow` `floating`	`"in-flow"`	placement
`floatingHorizontalAnchor`Floating horizontal anchor · Floating placement	`enumleft` `center` `right`	`"left"`	floatingHorizontalAnchorConditional availability in the Inspector
`floatingVerticalAnchor`Floating vertical anchor · Floating placement	`enumtop` `center` `bottom`	`"top"`	floatingVerticalAnchorConditional availability in the Inspector
`floatingZIndex`Floating layer · Floating placement	`number`	`100`	floatingZIndex
`floatingAlignment`Floating alignment · Floating placementChoose the page edge or client origin. Responsive width/height, content sizing, limits, margins and offsets remain active. Use Stretch on both axes to fill the client area.	`enumnone` `top` `bottom` `left` `right` `client`	`"none"`	floatingAlignmentConditional availability in the Inspector
`progressEnabled`Enable border progress · ProgressShow progress along the Panel border automatically when the value is greater than 0 and less than 100.	`boolean`	`false`	progressEnabled
`progressValue`Progress (%) · ProgressProgress percentage from 0 to 100. At 0 or 100 the indicator is hidden.	`number`	`0`	progressValue
`backgroundImage`Background image · AppearanceImage URL, data URL, or project asset path (assets/imported/...). Leave empty to use only the selected style.	`string`	`""`	backgroundImage
`backgroundSize`Background size · AppearanceCover fills with cropping; contain keeps the full image; auto uses its original size; stretch fills both dimensions.	`enumcover` `contain` `auto` `stretch`	`"cover"`	backgroundSize
`backgroundPosition`Background position · Appearance	`enumcenter` `top` `bottom` `left` `right` `left top` `right top` `left bottom` `right bottom`	`"center"`	backgroundPosition
`backgroundRepeat`Background repeat · Appearance	`enumno-repeat` `repeat` `repeat-x` `repeat-y`	`"no-repeat"`	backgroundRepeat
`backgroundColor`Background Color · Appearance	`color`	`"transparent"`	backgroundColor
`borderColor`Border Color · Appearance	`color`	`"#808080"`	borderColor
`currentRowBindings`Current row · DataBind writable visual values to fields of this repeated row.	`current-row-bindings`Editor: current-row-bindings	`[]`	currentRowBindings

API in code

Member	Signature	Access
`aspectRatio`	`aspectRatio: WebAspectRatio;`	Read and write
`floatingAlignment`	`floatingAlignment: WebPanelFloatingAlignment;`	Read and write
`placement`	`placement: 'in-flow' \| 'floating';`	Read and write
`floatingHorizontalAnchor`	`floatingHorizontalAnchor: 'left' \| 'center' \| 'right';`	Read and write
`floatingVerticalAnchor`	`floatingVerticalAnchor: 'top' \| 'center' \| 'bottom';`	Read and write
`floatingZIndex`	`floatingZIndex: number;`	Read and write
`caption`	`caption: string;`	Read and write
`progressEnabled`	`progressEnabled: boolean;`	Read and write
`progressValue`	`progressValue: number;`	Read and write
`progressVisible`	`readonly progressVisible: boolean;`	Read-only
`backgroundImage`	`backgroundImage: string;`	Read and write
`backgroundSize`	`backgroundSize: WebPanelBackgroundSize;`	Read and write
`backgroundPosition`	`backgroundPosition: WebPanelBackgroundPosition;`	Read and write
`backgroundRepeat`	`backgroundRepeat: WebPanelBackgroundRepeat;`	Read and write

Inherited members (27)

Member	Signature	Access
`currentRowBindings`	`currentRowBindings: readonly WebCurrentRowBinding[];`	Read and write
`element`	`readonly element: TElement;`	Read-only
`id`	`readonly id: string;`	Read-only
`name`	`readonly name: string;`	Read-only
`visible`	`visible: boolean;`	Read and write
`collapseWhenHidden`	`collapseWhenHidden: boolean;`	Read and write
`enabled`	`enabled: boolean;`	Read and write
`x`	`x: number;`	Read and write
`y`	`y: number;`	Read and write
`width`	`width: number;`	Read and write
`height`	`height: number;`	Read and write
`margin`Outer spacing on all four sides, in pixels.	`margin: number;`	Read and write
`marginTop`	`marginTop: number;`	Read and write
`marginRight`	`marginRight: number;`	Read and write
`marginBottom`	`marginBottom: number;`	Read and write
`marginLeft`	`marginLeft: number;`	Read and write
`alignSelf`	`alignSelf: RuntimeLayoutAlignSelf;`	Read and write
`tabIndex`	`tabIndex: number;`	Read and write
`backgroundColor`	`backgroundColor: string;`	Read and write
`color`	`color: string;`	Read and write
`borderColor`	`borderColor: string;`	Read and write

`focus`

method

focus(options?: FocusOptions): void;

`show`

method

show(): void;

`hide`

method

hide(): void;

`bindEvent`

method

bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;

`emit`

method

emit(eventName: string, detail?: unknown): boolean;

`dispose`

method

dispose(): void;

Events

Link methods in Interaction. How to use events.

OnClick

Standard event (Event).

Signature and example

import type { WebPanel } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Panel1Click(
    sender: WebPanel,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnDblClick

Standard event (Event).

Signature and example

import type { WebPanel } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Panel1DblClick(
    sender: WebPanel,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnMouseEnter

Standard event (Event).

Signature and example

import type { WebPanel } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Panel1MouseEnter(
    sender: WebPanel,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}

OnMouseLeave

Standard event (Event).

Signature and example

import type { WebPanel } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Panel1MouseLeave(
    sender: WebPanel,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}