FluentUI.Blazor v4.4

Vue d’ensemble

Nous venons de publier une nouvelle version 4.4 de Microsoft.FluentUI.AspNetCore.Components. Cette version corrige certains bugs détectés ces derniers jours, mais ajoute également quelques nouvelles fonctionnalités.

• New Sortable List. Il permet de réorganiser les éléments d’une liste (ou d’une liste à l’autre) par glisser-déposer.
• New KeyCode. Parfois, Blazor ne récupère pas toutes les informations KeyDown qu’il reçoit de JavaScript. Ce petit composant récupère ces données.
• New (experimental) MultiSplitter. Ce composant divise un panneau en plusieurs sections et permet à l’utilisateur de contrôler la mise en page.
• DataGrid Loading. Nous avons ajouté les paramètres Loading et LoadingContent à la grille de données FluentDataGrid.
• Lists components. Les listes ont été modifiés pour gérer la propriété Items de manière identique à FluentOptions.

Nouvelles fonctionnalités

Sortable List

Une implémentation de la bibliothèque SortableJS pour Blazor FluentUI. Ce composant permet de réordonner les éléments au sein d’une liste (ou entre les listes) en utilisant le glisser-déposer. Il est basé sur l’article et le code de Burke Holland (réutilisé avec sa permission).

Le site de démonstration contient tous les détails sur la façon d’utiliser le composant dans vos propres projets (nous n’incluons pas le script SortableJS dans la bibliothèque) et les paramètres qui peuvent être utilisés pour la configuration. Nous avons apporté quelques modifications par rapport aux propriétés originales afin de lui donner un aspect plus proche de Blazor.

Le composant n’a pas d’implémentation par défaut pour gérer les événements de mise à jour. Des exemples sont bien sûr fournis. Si vous ne gérez aucun événement, aucun tri ou déplacement ne se produira, car Blazor doit apporter les modifications aux structures de données sous-jacentes afin de pouvoir réafficher la liste.

KeyCode

Dans certaines circonstances, Blazor ne récupère pas toutes les informations KeyDown qu’il reçoit de JavaScript. FluentKeyCode est un petit composant qui récupère ces données, de manière similaire à la bibliothèque JavaScript KeyCode.

Le composant FluentKeyCode étend les propriétés de l’événement OnKeyDown en ajoutant un objet FluentKeyCodeEventArgs qui contient les arguments suivants:

• Location est la clavier utilisé (Standard, NumPad, Mobile, …).
• KeyCode est la valeur numérique de la touche pressée.
• Key est la valeur Enum corrspondant à KeyCode
• CtrlKey, ShiftKey, AltKey, MetaKey sont à True lorsque la touche Ctrl, Shit, Alt ou meta est pressée, en plus d’une autre touche.
• ShiftKey est True lorsque la touche Ctrl est pressée, en plus d’une autre touche.

⚠️ Certaine propriétés proviennent de données marquées Deprecated, mais toujours supportées par tous les navigateurs. Ce composant sera adapté en conséquence, une fois les nouvelles propriétés disponibles.

Il est possible d’ignorer ou d’inclure uniquement certains combinaisons de touches, afin d’optimiser le processus de communication entre JavaScript et Blazor. Il est également possible d’arrêter la propagation et d’empêcher l’action par défaut de l’événement en cours.

<FluentKeyCode Anchor="MyCard" OnKeyDown="@KeyDownHandler" />

Multi Splitter

Le composant FluentMultiSplitter divise le panneau en plusieurs sections et permet à l’utilisateur de contrôler la mise en page.

Vous pouvez inclure autant de volets que vous le souhaitez dans un conteneur. Par défaut, les volets sont redimensionnables, mais la propriété Resizable peut être utilisée pour bloquer cette fonctionnalité. La taille initiale est exprimée en pourcentage ou en pixels et possède une valeur minimale et maximale. Un panneau peut être entièrement réduit en définissant la propriété Collapsible sur True.

Ce composant est actuellement en statut “Expérimental”.

Voir la documentation sur cette page.

Pourquoi avons-nous créé ce nouveau composant alors que FluentSplitter existe déjà ? Nous voulons généraliser ce composant en facilitant l’utilisation de plusieurs (>2) panneaux par conteneur. Nous avons également utilisé des variables CSS pour simplifier la personnalisation des couleurs et des tailles. Donnez-nous votre avis :-)

Mise à jour du composant DataGrid

Nous avons ajouté les paramètres Loading et LoadingContent à la grille de données FluentDataGrid. Par défaut, lorsque le paramètre Loading est défini à true, le contenu du chargement sera un ring de progression avec le texte “Loading…”. Vous pouvez remplacer ce contenu par votre propre contenu au moyen du paramètre LoadingContent.

Mise à jour des composants de listes

Les composants de liste (AutoComplete, Checkbox, Listbox et Select) ont été modifiés de façon à ce que cela n’ait pas d’importance si les options sont spécifiées par le paramètre Items ou par des FluentOptions spécifiées manuellement. Dans une situation de sélection unique, nous trouverons et traiterons toujours l’option sélectionnée.

Le composant AutoComplete a fait l’objet d’une mise à niveau en matière d’accessibilité. Vous pouvez désormais utiliser le clavier pour naviguer dans les éléments de la liste et sélectionner un élément via Enter. Dans l’ensemble, le composant fonctionne désormais beaucoup mieux avec les logiciels de lecture d’écran.

Taille personnalisée pour FluentIcon

Si vous souhaitez ajouter une icône à FluentIcon avec une taille personnalisée (non reprise dans les tailles standards IconSize), vous pouvez maintenant utiliser une la valeur IconSize.Custom.

Corrections diverses

Le reste des corrections et des changements pour cette version est (à nouveau) une liste assez longue. Nous vous renvoyons à la page What’s new sur le site de la documentation pour une vue d’ensemble complète (y compris les liens vers les problèmes et les demandes de modifications sur GitHub).

Templates

Nous avons mis à jour les modèles afin d’intégrer les dernières corrections apportées aux composants. Nous avons également corrigé un problème qui apparaissait lorsque des fournisseurs externes étaient utilisés pour l’authentification.

Installez le Modèle Visual Studio en utilisant ce lien.

Preview NuGet Feed

Si vous voulez être à la pointe du progrès et suivre ce que nous construisons, nous avons un flux disponible qui héberge les paquets pour la bibliothèque de base qui sont construits à chaque livraison que nous faisons sur la branche dev. L’adresse du flux est https://pkgs.dev.azure.com/fluent-blazor/public/_packaging/previews/nuget/v3/index.json

Il ne s’agit pas d’un flux à utiliser en production. Ce flux est directement lié à notre branche Développement. Il est donc possible (probable) que certains Packages causent des problèmes pendant quelques heures, le temps de les détecter et les corriger.

Web sites

• Documentation: https://www.fluentui-blazor.net
• NuGet packages: https://aka.ms/fluent-blazor-libs

Feedback

Si vous trouvez quelque chose qui sort de l’ordinaire, faites-le nous savoir dans le repo sur GitHub, ou Twitter / X.