Fluent UI Blazor v5.0.1 est maintenant disponible !

Publié le 14 octobre 2026, Fluent UI Blazor v5.0.1 est disponible sur NuGet. Cette première version après la v5.0.0, ajoute davantage de façons de travailler avec les contrôles en lecture seule, introduit une sélection récursive dans FluentTreeView et permet au glisser-déposer de fonctionner avec les entrées tactiles. Elle apporte également un ordre des éléments dans FluentGrid et inclut des améliorations ciblées et des correctifs dans l’ensemble de la bibliothèque de composants.

Il s’agit d’une mise à jour non disruptive. Vous pouvez passer à la version v5.0.1 sans modifier votre code de composants v5 existant.

Davantage de contrôles peuvent être en lecture seule

Certaines valeurs doivent rester visibles sans que l’utilisateur puisse les modifier. Dans v5.0.1, davantage de composants d’entrée et de sélection respectent désormais leur paramètre ReadOnly : leurs valeurs restent accessibles, mais les interactions sont empêchées. Utilisez plutôt Disabled lorsqu’un contrôle doit être indisponible.

Par exemple, un interrupteur peut afficher sa valeur actuelle sans pouvoir être basculé :

<FluentSwitch Label="Notifications enabled"
              Value="true"
              ReadOnly="true" />

Consultez les exemples de Switch et la documentation de Listbox pour connaître l’utilisation propre à chaque composant. #5369

Sélection récursive dans TreeView

FluentTreeView peut désormais gérer une sélection multiple récursive. La sélection d’un parent sélectionne ses descendants, et sa désélection efface également la sélection des descendants. Les cases à cocher des parents reflètent l’état de leurs enfants : elles sont cochées lorsque tous les enfants sont sélectionnés et indéterminées lorsqu’une partie seulement de la branche l’est.

<FluentTreeView Items="@Items"
                SelectionMode="TreeSelectionMode.MultipleRecursive"
                HideSelection="true"
                @bind-SelectedItems="@SelectedItems" />

@code {
    private IEnumerable<ITreeViewItem>? SelectedItems = [];

    private readonly TreeViewItem[] Items =
    [
        new("engineering", "Engineering",
        [
            new TreeViewItem("platform", "Platform"),
            new TreeViewItem("applications", "Applications")
        ])
    ];
}

Pour définir des états personnalisés aux cases à cocher, utilisez CheckState avec TreeSelectionMode.Multiple et mettez à jour SelectedItems dans SelectedItemsChanged. CheckState est ignoré avec MultipleRecursive, car le composant calcule automatiquement les états. La sélection récursive nécessite que les données de tous les descendants soient disponibles. Consultez la documentation TreeView pour découvrir les deux approches. #5419

Glisser-déposer sur les appareils tactiles

FluentDragContainer et FluentDropZone prennent désormais en charge les gestes tactiles natifs. Le balisage existant du glisser-déposer peut ainsi fonctionner sur les appareils tactiles sans implémentation spécifique supplémentaire. Consultez les exemples de glisser-déposer. #5418

Ordre des éléments dans Grid

FluentGridItem accepte désormais OrderXs, OrderSm, OrderMd, OrderLg, OrderXl et OrderXxl. Ces paramètres permettent de modifier l’ordre visuel des éléments à chaque point de rupture tout en gardant un balisage concis :

<FluentGrid Spacing="2">
    <FluentGridItem Xs="12" Md="4">
        First in the DOM
    </FluentGridItem>
    <FluentGridItem Xs="12" Md="4" OrderXs="5" OrderMd="1">
        Second in the DOM
    </FluentGridItem>
    <FluentGridItem Xs="12" Md="4" OrderXs="1" OrderMd="5">
        Third in the DOM
    </FluentGridItem>
</FluentGrid>

Les valeurs d’ordre suivent une approche mobile-first : une valeur reste effective aux points de rupture plus larges jusqu’à ce qu’un autre paramètre d’ordre la remplace. Les valeurs prises en charge sont -1 pour le premier emplacement, 0 à 5, et 6 pour le dernier. Le réordonnancement modifie uniquement la présentation visuelle, pas l’ordre du DOM. Veillez donc à conserver un ordre source cohérent pour les utilisateurs du clavier et des lecteurs d’écran.

Consultez la documentation Grid pour découvrir l’exemple complet de mise en page réactive. #5437

Formulaires, modèles et découverte des composants

Les messages de champ obligatoire reposent désormais sur une approche commune aux composants d’entrée standards et composites. Le message défini par l’attribut RequiredAttribute d’un modèle est respecté, et aucun message obligatoire généré n’est affiché lorsque EditContext fournit déjà un message de validation. Ces changements concernent notamment Autocomplete et DatePicker, ainsi que les champs de saisie individuels. #5399, #5400

Le style de l’indicateur de champ obligatoire a également été corrigé, y compris pour les champs avec des éléments décoratifs. Consultez la documentation Field. #5416

Le site de démonstration propose désormais une planche de prévisualisation qui rassemble de nombreux composants sur une seule page pour en obtenir rapidement un aperçu. #4995

Les modèles de projet ont également été mis à jour : les modèles .NET 11 RC1 sont disponibles, le modèle de démarrage Aspire cible Aspire 13.6, et les en-têtes, pieds de page et styles générés ont été simplifiés. Parcourez les modèles de projet pour choisir un point de départ. #5366, #5375, #5387

Autres améliorations

• FluentTimePicker valide désormais StartHour, EndHour et Increment ; les valeurs prises en charge sont précisées dans la documentation TimePicker. #5346
• FluentSelect tient désormais compte d’un aria-label explicitement fourni pour déterminer son nom accessible. Consultez la documentation Select. #5356
• FluentDataGrid évite les opérations inutiles lors de la récupération du nombre total d’éléments. #5389
• Les erreurs d’interopérabilité JavaScript se propagent désormais plus fiablement, et Checkbox évite de configurer inutilement des observateurs lors de son premier rendu. #5415
• La désinfection du balisage utilise désormais des expressions régulières prévisibles, sans retour arrière, afin d’éviter les délais d’expiration lors du traitement du balisage. #5429
• OverflowChangedItem conserve les métadonnées de son constructeur public nécessaires aux applications élaguées. Consultez Overflow. #5430
• La table DataGrid expose désormais role="grid" pour les technologies d’assistance. Consultez la documentation DataGrid. #5434

Corrections de bogues

• Les popovers se repositionnent désormais lorsque leur contenu change de taille. #5354
• Les groupes d’onglets imbriqués conservent leur propre orientation horizontale ou verticale. #5353
• Les styles de superposition fournis via OverlayOptions sont correctement appliqués. #5362
• Les colonnes épinglées de DataGrid ne reçoivent plus d’espacements indésirables lorsque des lignes maître/détail et des colonnes redimensionnables sont utilisées simultanément. #5363
• Le tiroir de navigation se ferme désormais après la sélection d’un lien en mode SSR. #5390
• La navigation par année dans DatePicker permet désormais d’atteindre des années valides aux limites MinDate et MaxDate. #5392
• Les icônes de PresenceBadge se mettent à jour lorsque le paramètre Status ou OutOfOffice change. #5414
• Autocomplete efface son champ de saisie après la sélection d’une option avec la touche Entrée. #5425
• Les icônes de Menu ne chevauchent plus les libellés dans Firefox. #5433
• La sérialisation JSON du mode de thème est corrigée pour .NET 9 et les versions ultérieures. #5435
• DatePicker analyse les valeurs d’année selon la culture sélectionnée. #5445

---

Ressources

Ressource	Lien
NuGet	Microsoft.FluentUI.AspNetCore.Components
Documentation et démo	https://fluentui-blazor.net
GitHub	https://github.com/microsoft/fluentui-blazor

Merci à toutes les personnes qui ont contribué au code, testé les composants, signalé des problèmes et amélioré la documentation. Nous espérons que ces mises à jour faciliteront la création et l’utilisation de vos applications Fluent UI Blazor.