Sachez quelle taille d’écran a votre utilisateur, et laissez votre code réagir quand elle change.
Pourquoi c’est utile
- Points de rupture nommés
- Mise à jour au redimensionnement
- Simple
Où il trouve sa place
- Logique adaptative
- Changements de mise en page
- Menus
Exemple
<BreakpointObserver>
<p>Current breakpoint: <strong>@context</strong> (resize the window to see it change).</p>
@if (context >= Breakpoint.Lg)
{
<Alert Severity="Severity.Info">Wide layout: the sidebar is shown.</Alert>
}
else
{
<Alert Severity="Severity.Warning">Narrow layout: the sidebar is hidden.</Alert>
}
</BreakpointObserver>Un court fragment. Ajoutez @using RayCraft.Blazor.Components à votre page et utilisez un mode de rendu interactif.
Inclus dans RayCraft Free. Des exemples fonctionnels se trouvent dans le dépôt GitHub (MIT); il contient du code d’exemple et de démonstration, pas le code de la bibliothèque.