Layout and styles

Configure layout in the Inspector. The container arranges its children; each child defines how it occupies space in the parent.

Container layout

Padding is the container’s internal space. Gap separates its children. Margin top/right/bottom/left defines each component’s external space; each side overrides the general Margin value.

Size and responsiveness

In Responsive width and Responsive height, choose:

• fixed: uses the Width/Height dimension.
• stretch: fills the available space along the axis.
• fit-content: follows the content and rendered children.

Minimum/Maximum constrain each axis; an empty maximum means no limit. In row/column, Grow distributes free space, Shrink allows a child to give up space, and Item alignment adjusts cross-axis alignment. Auto inherits the parent’s alignment. Fit-content preserves the content’s intrinsic size.

In align-to-parent, use Horizontal anchor, Vertical anchor, and edge insets. The Inspector disables positions or insets that the active layout does not use. Geometry values use pixels.

Use Responsive in the Designer to change the working width and observe the result. The editing width does not create a layout rule: configure flow, Wrap, Stretch, and limits to adapt the interface.

Change properties in code

Available TypeScript properties appear in each component’s reference. Structural Inspector settings do not automatically become code properties with the same name.

Panel1.width = 480;
Panel1.marginTop = 8;
Panel1.marginRight = 16;
Panel1.alignSelf = 'stretch';
Panel1.collapseWhenHidden = false;
Panel1.hide();
Panel1.show();

visible controls display; collapseWhenHidden = true, the default, removes hidden components from layout. Use false to reserve their space. enabled disables controls that support this state and exposes aria-disabled on others. On the Page root, this.layoutMode changes the container mode.

Floating Panels and reusable components

On a Panel, Placement = floating overlays content without reserving space and follows page scrolling. Floating alignment accepts none, top, bottom, left, right, and client. Alignment preserves Responsive width/height, limits, margins, and insets. To fill the page area, use client and Stretch on both axes.

In none mode, use horizontal/vertical anchors and offsets. Floating layer controls stacking order. placement = 'in-flow' returns the same Panel and its children to the original layout.

Drag a definition from Reusable Components onto the page to create a placement; its reference and code are included automatically. Edit the definition to share its interface across placements. Configure size, margins, and positioning on each placement. Floating reusable components are pinned to the viewport, while floating Panels belong to the page’s scrollable area.

Popup is a dialog outside the page flow. Use Popup1.show() and Popup1.close(); modal = true opens it in the browser’s modal layer. Arrange controls inside the Popup in the Designer.

Styles

Create or edit styles in Styles and assign them in the Inspector’s Style field. States: Base, Hover, Focus, Active, and Disabled. Shared keeps common values; Light overrides and Dark overrides change only the selected theme. Removing an override restores the shared value.

For local code adjustments, visual components expose backgroundColor, color, and borderColor. The component contract has no generic style property. Group is a transparent container for organization.

Application themes

When creating a project, choose Aurora, Prism, Flat, or WebRAD. All offer Light/Dark and use Roboto as the default font. The preset supplies editable colors and styles.

In Styles > Themes, edit Light/Dark colors, choose the initial Light, Dark, or System mode, and enable remembering the user’s choice if needed. Confirm with Save themes.

In the color picker, choose Theme color to retain the theme binding. Add color creates a custom color with Light/Dark values; Same uses one value in both modes. Entering a fixed property color removes the binding. In existing projects, Link Default styles and scrollbars when saving applies bindings to Default styles and scrollbars.

Preview theme in Styles and Responsive > Application theme in the Designer change the editing view. F9 Preview and the application use the saved initial mode or the user’s remembered choice. The IDE theme is independent.

Theme.mode = 'system'; // Also accepts 'light' and 'dark'.
Theme.toggle();
const currentTheme = Theme.resolvedMode; // Read-only: 'light' or 'dark'.
Theme.reset(); // Restore the initial mode and forget the saved choice.

To assign a theme-bound color in code:

import { themeColorReference } from '@webrad/runtime';
Panel1.backgroundColor = themeColorReference('surface');

customThemeColorReference(id) from the same module references a custom color by its saved Themes ID.

Changing themes preserves pages, components, and values. Theme.onChange accepts one handler; Theme.subscribe(handler) supports multiple handlers and returns an unsubscribe function. The typed event provides mode, resolvedMode, and previous values in event.detail. Release subscriptions when their owner is disposed.

Fonts and assets

In Styles > Text > Font family, choose Roboto, Open Sans, JetBrains Mono, Inter, Lato, Montserrat, Poppins, or Nunito. Weight and italic are separate properties. Fonts are bundled with the exported project and work without a CDN; preserve notices in assets/licenses/fonts/ when publishing. Generic sans/serif/mono options use system fonts.

Import files in Assets and use portable paths such as assets/imported/profile.png. External URLs depend on network access and service permissions. Use the same asset reference in the Designer and application.