Aller au contenu principal

Mobile / Desktop

Lagoon expose les informations de fenêtre via App.WindowInformation. Elles permettent de rendre un composant différent selon le type d'affichage courant.

Choisir un rendu selon le média​

ResponsivePanel.razor
@inherits LgComponentBase

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

L'information de fenêtre est exposée par la propriété App.WindowInformation, dont MediaType vaut MediaType.Mobile ou MediaType.Desktop.

Activer le refresh automatique​

Par défaut, un composant n'est pas reconstruit lorsque la fenêtre passe de desktop à mobile (ou inversement) : le rendu reste figé tant qu'aucun événement Blazor ne déclenche de nouveau rendu.

Pour un comportement réellement responsive, abonnez-vous à l'événement App.OnWindowResize et appelez StateHasChanged. Pensez à vous désabonner dans Dispose pour éviter les fuites mémoire.

ResponsivePanel.razor.cs
public partial class ResponsivePanel : LgComponentBase
{
    protected override void OnAfterRender(bool firstRender)
    {
        base.OnAfterRender(firstRender);
        if (firstRender)
        {
            // S'abonne au redimensionnement de la fenêtre.
            App.OnWindowResize += OnWindowResizeAsync;
        }
    }

    private Task OnWindowResizeAsync(WindowInformation info)
    {
        // Reconstruit le composant à chaque changement de taille.
        return InvokeAsync(StateHasChanged);
    }

    protected override void Dispose(bool disposing)
    {
        App.OnWindowResize -= OnWindowResizeAsync;
        base.Dispose(disposing);
    }
}
Usage recommandé

Utilisez ce mécanisme lorsque le markup mobile et desktop diffèrent réellement. Pour de simples ajustements visuels, privilégiez le CSS et le thème.

La même information peut être utilisée pour déplacer un groupe de menu entre le menu principal et la 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>

Voir aussi​