# Layout and styles

Configure containers, responsiveness, styles, themes, and fonts.

URL: https://webrad.atentor.com/docs/layout
Updated: 2026-11-07

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

## Container layout

| Container layout | Purpose |
| --- | --- |
| fixed | Position using Left/Top and dimensions. |
| align-to-parent | Anchors and distances from the parent’s edges. |
| row | Horizontal flow with Gap, alignment, and Wrap. |
| column | Vertical flow with Gap and alignment. |

**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.

```ts
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.

```ts
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:

```ts
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.