L’interface utilisateur Telerik pour Blazor se dirige vers un voyage réactif

Telerik UI pour Blazor a des capacités réactives et adaptatives intégrées sur de nombreux composants, avec encore plus à venir. Nous allons jeter un coup d’oeil!

Les capacités réactives et adaptatives sont devenues la norme de facto lors de la conception et de la création d’applications Web. Les gens n’utilisent plus leurs téléphones et appareils mobiles pour simplement naviguer, mais pour faire leur travail personnel et professionnel à tout moment et n’importe où. Qu’il s’agisse de commander de la nourriture, de faire des achats, de vérifier et de mettre à jour l’état des éléments de travail, de soumettre des demandes ou d’effectuer des transactions, les applications Web doivent avoir la même apparence et fonctionner aussi bien, quels que soient l’appareil et la taille de l’écran.

Qu’est-ce qu’une application Web responsive ?

Les conceptions Web réactives sont celles qui peuvent s’adapter à différentes tailles d’écran, de sorte que le contenu visualisé et l’expérience utilisateur sont excellents partout, des plus petits écrans sur mobile aux plus grands sur les tablettes, les ordinateurs de bureau et même les grands écrans de télévision. À la base, la conception Web réactive utilise des systèmes de grille fluides, des images fluides et des requêtes multimédias. Ceux-ci garantissent que la mise en page et le contenu du site Web ou de l’application changent et s’adaptent lorsque certaines conditions sont remplies.

Avons-nous besoin de réactivité et d’adaptabilité dans les applications Blazor ?

Avec la popularité croissante du framework Blazor pour la création d’applications Web pour divers scénarios et secteurs verticaux, la conception et le comportement respectifs doivent être conformes aux exigences des temps et des utilisateurs modernes. Dans cet article de blog, nous allons plonger dans les capacités du Interface utilisateur Telerik pour la bibliothèque Blazor et comment il permet et soutient vos efforts de développement pour concevoir et créer des projets Blazor réactifs et adaptatifs.

Comment créer des applications Web réactives avec l’interface utilisateur Telerik pour Blazor

Il existe de nombreux composants, propriétés et options dans la bibliothèque Telerik UI pour Blazor qui vous permettront de créer des applications réactives – le composant Blazor MediaQuery, des paramètres adaptatifs dans Pager et Toolbar, des onglets déroulants dans le composant TabStrip, un GridLayout réactif, etc. Passons en revue les différentes options et les cas d’utilisation lorsqu’elles peuvent être appliquées.

La Composant Blazor MediaQuery est un outil puissant pour créer un design réactif et adaptatif. Il vous permet de définir des requêtes multimédias et de modifier la mise en page de votre page en fonction de la résolution de l’écran.

MediaQuery vous permet de modifier les paramètres des composants, de restituer différents composants ou d’empêcher le rendu des composants en fonction de la taille de la fenêtre d’affichage du navigateur. Cela vous permet de rendre le rendu de votre application Blazor beaucoup plus adaptatif. Néanmoins, dans les cas où vous n’avez pas besoin d’affecter les composants et leurs paramètres, vous pouvez toujours utiliser le rendu CSS et HTML réactif pour la mise en page globale.

Disposition de la grille de données compacte dans les applications Blazor

Voyons rapidement comment le composant MediaQuery s’intègre avec le Composant Blazor Data Grid pour vous aider à obtenir une disposition de grille compacte sur des résolutions plus petites.

Dans le site de démonstration Telerik Blazor, nous avons illustré comment vous pouvez basculer la visibilité des colonnes lorsqu’une requête multimédia correspond. Il ne vous reste plus qu’à définir les paramètres média et profiter de la réactivité du paramètre Visible des GridColumns… et la magie opère !

<TelerikGrid Data="@GridData"
             Width="100%"
             Height="400px"
             Sortable="true"
             Pageable="true">
    <GridColumns>
        <GridColumn Field=@nameof(ProductDto.ProductId) Width="60px" Title="ID" />
        <GridColumn Field=@nameof(ProductDto.ProductName) Title="Product Name" />
        <GridColumn Field=@nameof(ProductDto.UnitPrice) DisplayFormat="{0:C2}" Title="Price" />
        <GridColumn Field=@nameof(ProductDto.UnitsInStock) Visible="@(!XSmall)" Title="In stock" />
        <GridColumn Field=@nameof(ProductDto.QuantityPerUnit) Visible="@(!XSmall)" Title="Quantity per unit" />
        <GridColumn Field=@nameof(ProductDto.Discontinued) Visible="@(!XSmall)" Title="Discontinued" />
        <GridColumn Field=@nameof(ProductDto.CategoryName) Visible="@(Medium || Large)" Title="Category Name" />
        <GridColumn Field=@nameof(ProductDto.CategoryDescription) Width="230px" Visible="@Large" Title="Category Description" />
    </GridColumns>
</TelerikGrid>

<TelerikMediaQuery Media="(max-width: 600px)" OnChange="((changed) => XSmall = changed)"></TelerikMediaQuery>
<TelerikMediaQuery Media="(max-width: 960px)" OnChange="((changed) => Small = changed)"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 961px)" OnChange="((changed) => Medium = changed)"></TelerikMediaQuery>
<TelerikMediaQuery Media="(min-width: 1200px)" OnChange="((changed) => Large = changed)"></TelerikMediaQuery>

@code {
    public IEnumerable<ProductDto> GridData { get; set; }

    private bool XSmall { get; set; }
    private bool Small { get; set; }
    private bool Medium { get; set; }
    private bool Large { get; set; }

protected override void OnInitialized()
    {
        GridData = productService.GetProducts();
    }
}

Vous pouvez jouer avec l’exemple de notre Coureur de code Blazor basé sur un navigateur Telerik REPL.

Vous trouverez plus d’informations sur l’interface utilisateur pour le composant Blazor MediaQuery sur le démo et Documentation des sites.

Formulaire réactif dans les applications Blazor

Un autre scénario réactif couramment utilisé par nos clients est la combinaison des composants Blazor Form et MediaQuery UI. Le formulaire fournit des paramètres de configuration flexibles qui permettent de basculer lorsque la résolution change. Voyons le comportement du formulaire réactif ci-dessous, et vous pouvez toujours sauter dans exemple de formulaire Blazor adaptatif sur notre site de démonstration pour l’explorer davantage.

Dans le prochain GIF, nous démontrons notre nouvel exemple combinant les super pouvoirs des composants Menu, Drawer et MediaQuery. Il montre comment la disposition horizontale du Menu Blazor Le composant d’interface utilisateur se transforme en douceur en un menu hamburger vertical mis en œuvre à l’aide du Tiroir Blazor composant.

Si vous êtes curieux d’en savoir plus sur la façon dont nous avons combiné les composants Blazor Drawer et Menu, visitez exemple de démonstration de menu Blazor adaptatif.

GridLayout réactif dans les applications Blazor

Un exemple d’intégration plus curieux est celui des composants GridLayout et MediaQuery. Ci-dessous, vous pouvez voir comment le GridLayout met à jour ses définitions de colonnes et de lignes pour fournir une belle mise en page pour répertorier les articles dans toutes les résolutions.

Le GIF capture notre démo adaptative Blazor GridLayout en action.

Adaptabilité intégrée dans l’interface utilisateur Telerik pour Blazor

Nous pouvons écrire des tonnes de pages sur toutes les opportunités que le composant MediaQuery a apportées à la suite Telerik UI for Blazor ! Mais passons aux capacités d’adaptation que nos composants fournissent dès le départ.

Après avoir examiné les capacités de la grille de données compacte, j’aimerais attirer votre attention sur les capacités d’adaptation d’une partie interne importante du composant : le téléavertisseur. Notre version 3.2.0 est livrée avec un paramètre adaptatif pour l’interface utilisateur de Blazor Pager qui contrôle s’il faut rendre le composant redimensionnable dans des résolutions plus petites.

Regardez les capacités du téléavertisseur dans l’extrait intégré ci-dessous ou éditez-le directement dans l’outil Blazor REPL. Les fonctionnalités intégrées de Blazor Pager permettent au composant de masquer et d’optimiser les éléments rendus lorsque sa largeur est réduite. Dans la plus petite résolution, les boutons du pager sont rendus comme un élément de sélection.

Barre d’outils Blazor adaptative

La fonction adaptative du Composant d’interface utilisateur BlazorToolbar est un autre énorme morceau du « puzzle réactif ». Lorsqu’elle est redimensionnée, la barre d’outils apporte un menu contextuel de débordement convivial qui affiche les outils qui ne peuvent pas tenir dans la largeur du conteneur de la barre d’outils. De plus, le Overflow Le paramètre des éléments de la barre d’outils vous permet de contrôler quels éléments doivent être déplacés vers la fenêtre contextuelle de débordement et lesquels doivent rester visibles en permanence.

Essayez-le dans le terrain de jeu intégré ci-dessous ou modifier dans notre REPL.

TabStrip défilable

La Composant d’interface utilisateur Blazor TabStrip est l’un des composants les plus populaires de notre bibliothèque. La Fonction de défilement du composant onglet rend les boutons de navigation droit et gauche à la demande en fonction de la largeur du TabStrip. Il permet de faire défiler les onglets via une interaction avec la souris ou le clavier. L’extrait suivant montre la beauté de la fonctionnalité et vous pouvez l’étendre davantage dans le lien REPL.

Où voulons-nous aller ?

Nous travaillons sur un tout nouveau design pour notre Blazor DatePicker et sélectionnons des composants d’interface utilisateur sur des résolutions plus petites qui constitueront un chapitre important de l’histoire réactive de l’interface utilisateur pour Blazor.

Restez à l’écoute et découvrez les prochaines versions de Interface utilisateur Telerik pour Blazor apportera!