docs › guidance › the web panel

the web panel

goo can embed a live Chromium webview anywhere in your tree. the blob for that is WebPanel. drop it inside a Container, give it a Url, and it renders the page inside your layout the same way any other blob does.

a full-screen webview

the smoke demo loads google.com full-bleed. the outer Container fills the screen. the WebPanel inside fills the container.

public class WebPanelSmokeUI : GooPanel<Container>
{
    protected override Container Build() => new Container
    {
        Height = Length.Percent(100),
        Width  = Length.Percent(100),
        BackgroundColor = BgBase,
        JustifyContent  = Justify.Center,
        AlignItems      = Align.Center,
        Children =
        {
            new Goo.WebPanel
            {
                Url    = "https://google.com/",
                Height = Length.Percent(100),
                Width  = Length.Percent(100),
            },
        },
    };
}

Url is the content surface. everything else is layout: Width, Height, Margin, flex properties. the reconciler wires those to the engine WebPanel the same way it handles any blob.

pausing offscreen views

a webview keeps running even when it is not visible. it ticks JavaScript, repaints, and plays any audio or video. for a view that is hidden or offscreen, set Paused = true to throttle all of that.

the pattern is to store the visibility state in a field and feed its inverse into Paused on each rebuild:

bool _visible = true;
string _url = "https://google.com/";

protected override Container Build() => new Container
{
    Width  = Length.Percent(100),
    Height = Length.Percent(100),
    Children =
    {
        new Goo.WebPanel
        {
            Url    = _url,
            Paused = !_visible,
            Width  = Length.Percent(100),
            Height = Length.Percent(100),
        },
    },
};

when _visible flips back to true, Paused becomes false on the next rebuild and the page resumes.

the style surface

WebPanel subscribes to a smaller style surface than Container. it exposes sizing, margins, flex, BackgroundColor, BackgroundTint, Opacity, and Transform. it does not expose Padding, BorderRadius, border properties, ZIndex, Cursor, or any other container-only property.

the webview owns its own background image and cursor on each frame, so the style facade omits those deliberately. style the page content inside the page itself.

if you need a container-only property next to a WebPanel, wrap it:

new Container
{
    BorderRadius = 12,
    Overflow     = OverflowMode.Hidden,
    Width        = 800,
    Height       = 600,
    Children     =
    {
        new Goo.WebPanel { Url = "https://google.com/" },
    },
}

the Container carries BorderRadius and Overflow. the inner WebPanel carries the live page. this wrapper pattern is described for all engine-special blobs in styles.

properties

property type what it does
Url string? the page to load
Paused bool throttles JavaScript, repaint, and media when true
Key string? reconciler identity across rebuilds
Width Length? explicit width
Height Length? explicit height
MinWidth Length? minimum width
MinHeight Length? minimum height
MaxWidth Length? maximum width
MaxHeight Length? maximum height
Margin Length? uniform outer margin
MarginLeft Length? left margin
MarginTop Length? top margin
MarginRight Length? right margin
MarginBottom Length? bottom margin
FlexBasis Length? flex base size
FlexGrow float? flex grow factor
FlexShrink float? flex shrink factor
BackgroundColor Color? fill behind the webview
BackgroundTint Color? tint the webview surface
Opacity float? overall transparency
Transform PanelTransform? 2D transform applied to the panel
OnClick Action<MousePanelEvent>? fires when the panel is clicked
OnMouseEnter Action<MousePanelEvent>? fires when the pointer enters
OnMouseLeave Action<MousePanelEvent>? fires when the pointer leaves
OnMouseDown Action<MousePanelEvent>? fires on pointer down
OnMouseUp Action<MousePanelEvent>? fires on pointer up
OnMouseMove Action<MousePanelEvent>? fires on pointer move

Url, Paused, and Key are the non-style members. Url sets the page, Paused throttles the webview, and Key is the reconciler identity property. every other property in the table is part of the generated style facade in WebPanel.Style.g.cs.

see also