Skip to main content

Mobile / Desktop

Lagoon exposes window information via App.WindowInformation. This allows you to render a component differently based on the current display type.

Rendering based on media type​

ResponsivePanel.razor
@inherits LgComponentBase

@if (App.WindowInformation.MediaType == MediaType.Mobile)
{
    <MobilePanel />
}
else
{
    <DesktopPanel />
}

The window information is exposed by the App.WindowInformation property, where MediaType is either MediaType.Mobile or MediaType.Desktop.

Enable automatic refresh​

By default, a component is not rebuilt when the window switches from desktop to mobile (or vice versa): the render remains frozen until a Blazor event triggers a re-render.

For truly responsive behavior, subscribe to the App.OnWindowResize event and call StateHasChanged. Remember to unsubscribe in Dispose to avoid memory leaks.

ResponsivePanel.razor.cs
public partial class ResponsivePanel : LgComponentBase
{
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            // Subscribe to window resize.
            App.OnWindowResize += OnWindowResizeAsync;
        }
    }

    private Task OnWindowResizeAsync(WindowInformation info)
    {
        // Rebuild the component on each size change.
        return InvokeAsync(StateHasChanged);
    }

    protected override void Dispose(bool disposing)
    {
        App.OnWindowResize -= OnWindowResizeAsync;
        base.Dispose(disposing);
    }
}
Recommended usage

Use this mechanism when the mobile and desktop markup actually differ. For simple visual adjustments, prefer CSS and theming.

Adaptive menus​

The same information can be used to move a menu group between the main menu and the toolbar.

MenuConfiguration.razor
@inherits LgComponentBase

<LgMenuConfiguration>
    <MenuSetDeclarations>
        <LgMenuSet Id="grpCommonToolbar">
            <LgMenuItem Text="#menuLanguage" />
            <LgMenuItem Text="#disconnect" Uri="lgredirect/logout" />
        </LgMenuSet>
    </MenuSetDeclarations>

    <Menu>
        @if (App.WindowInformation.MediaType != MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="grpCommonToolbar" />
        }
    </Menu>

    <Toolbar>
        @if (App.WindowInformation.MediaType == MediaType.Desktop)
        {
            <LgIncludeMenuSet Id="grpCommonToolbar" />
        }
    </Toolbar>
</LgMenuConfiguration>

See also​