Annonce de Fluent UI Blazor v5 RC2 — Toast, Autocomplete, Thèmes et plus encore

Nous sommes ravis d’annoncer la deuxième Release Candidate de la bibliothèque Fluent UI Blazor v5 ! Depuis la RC1, l’équipe a travaillé intensément sur la branche dev-v5, livrant deux nouveaux composants — FluentAutocomplete et FluentToast — ainsi qu’une puissante API de Thèmes avec un Theme Designer intégré, des améliorations majeures du DataGrid incluant les colonnes épinglées, et des dizaines d’améliorations sur l’ensemble de la bibliothèque.

Visitez notre site de démonstration.

Nouveau composant : FluentAutocomplete

Le composant FluentAutocomplete apporte une expérience d’autocomplétion complète à la v5, remplaçant l’implémentation de la v4 par un composant moderne entièrement réécrit.

Fonctionnalités clés

  • Recherche à la saisie — Filtrage dynamique des options au fur et à mesure de la saisie, avec prise en charge intégrée du debounce.
  • Sélection multiple — Sélectionnez plusieurs éléments affichés sous forme de badges supprimables dans la zone de saisie.
  • Navigation au clavier — Navigation complète avec les touches fléchées, Entrée pour sélectionner, Échap pour fermer, et Retour arrière pour supprimer le dernier élément sélectionné.
  • Modèles d’options personnalisés — Utilisez OptionTemplate pour afficher un contenu riche et personnalisé pour chaque suggestion.
  • Indicateur de progression — Affichez un indicateur de chargement pendant la récupération asynchrone des résultats.
  • MaxAutoHeight / MaxSelectedWidth — Contrôlez la mise en page et le comportement de débordement des éléments sélectionnés.

Utilisation de base

<FluentAutocomplete OnOptionsSearch="@OnSearchAsync"
                    OptionText="@(item => item.Name)"
                    OptionDisabled="@(e => e.Code == "au")"
                    @bind-SelectedItems="@SelectedCountries" />

@code
{
    IEnumerable<Country> SelectedCountries { get; set; } = [];

    Task OnSearchAsync(OptionsSearchEventArgs<Country> e)
    {
        e.Items = Countries.Where(i => i.Name.StartsWith(e.Text, StringComparison.OrdinalIgnoreCase))
                           .OrderBy(i => i.Name);

        return Task.CompletedTask;
    }
}

Ce composant est une réécriture complète — veuillez consulter la documentation de migration pour les changements par rapport au FluentAutocomplete de la v4.

Nouveau composant : FluentToast & Service Toast

Le nouveau service Toast offre une expérience de notification complète, incluant la prise en charge des toasts avec progression en temps réel.

Types de toast

La bibliothèque prend en charge quatre scénarios de toast via ToastType :

Type Description
Communication Notifications et messages généraux
Confirmation Confirmations de succès / échec
IndeterminateProgress Opérations longues sans suivi de progression
DeterminateProgress Opérations avec progression mesurable (ex. téléversement)

Utilisation simple

@inject IToastService ToastService

// Déclencher et oublier
await ToastService.ShowToastAsync(options =>
{
    options.Title = "Fichier sauvegardé",
    options.Intent = ToastIntent.Success,
    Timeout = 3000,
});

Avancé : instance de toast en temps réel

Pour des scénarios comme les téléversements ou les opérations longues, utilisez ShowToastInstanceAsync pour obtenir une référence en temps réel :

var toast = await ToastService.ShowToastInstanceAsync(options =>
{
    options.Title = "Téléversement du document...";
    options.Type = ToastType.DeterminateProgress;
});

// Mettre à jour la progression pendant l'affichage
await toast.UpdateAsync(t => t.Progress = 50);

// Terminer et fermer
await toast.UpdateAsync(t => t.Progress = 100);
await toast.CloseAsync();

Points clés du comportement

  • File d’attente — Le FluentToastProvider gère le nombre maximum de toasts visibles, la promotion dans la file d’attente et le positionnement.
  • Pause au survol — Le délai d’expiration du toast se met en pause lorsque l’utilisateur le survole, ou lorsque la fenêtre du navigateur perd le focus.
  • Transitions animées — Animations fluides d’ouverture/fermeture.
  • Accessibilité — Les attributs ARIA et les niveaux de politesse sont appliqués en fonction de l’intention du toast.

API de Thèmes & Theme Designer

La version RC2 introduit une API de Thèmes complète qui vous donne un contrôle total sur l’identité visuelle de votre application — d’une simple couleur de marque à un ensemble complet de design tokens personnalisés, avec persistance intégrée et un Theme Designer interactif.

Définir la couleur de marque de manière déclarative

Ajoutez les attributs data-theme et data-theme-color à votre balise <body> :

<body data-theme="light" data-theme-color="#0078D4">

La bibliothèque détecte automatiquement ces attributs, génère une rampe de couleurs et l’applique à l’application.

Définir la couleur de marque par code

Une API complète est disponible via IThemeService :

@inject IThemeService ThemeService

// Définir une couleur de marque personnalisée
await ThemeService.SetThemeAsync("#6B2AEE");

// Passer en mode sombre
await ThemeService.SetDarkThemeAsync();

// Basculer entre clair ↔ sombre
await ThemeService.SwitchThemeAsync();

// Appliquer le thème Teams
await ThemeService.SetTeamsLightThemeAsync();

// Contrôle complet avec les paramètres
await ThemeService.SetThemeAsync(new ThemeSettings
{
    Color = "#6B2AEE",
    Mode = ThemeMode.Dark,
    HueTorsion = 0.1f,
    Vibrancy = 0.2f,
});

Theme Designer

Le site de démonstration inclut une page Theme Designer où vous pouvez choisir interactivement une couleur de marque, ajuster la torsion de teinte et la vibrance, prévisualiser la rampe de couleurs générée, et voir votre thème appliqué à de vrais composants en temps réel. Lorsque le résultat vous convient, appliquez-le ou exportez les paramètres.

Fonctionnalités clés

Fonctionnalité Description
Rampe de couleurs Génération automatique d’une rampe complète à partir d’une seule couleur hexadécimale
Clair / Sombre / Système Prise en charge des trois modes, avec détection automatique de la préférence système
Thèmes Teams Thèmes Teams Light et Teams Dark intégrés
localStorage Les paramètres de thème sont mis en cache et restaurés automatiquement entre les sessions
Thème par élément Appliquez un thème personnalisé à un ElementReference spécifique sans changer le thème global
Support RTL SwitchDirectionAsync() pour basculer entre LTR et RTL

Améliorations du DataGrid

Le FluentDataGrid a reçu plusieurs améliorations importantes dans la RC2.

Colonnes épinglées (figées)

Les colonnes peuvent désormais être épinglées au bord gauche ou droit de la grille, afin qu’elles restent visibles lors du défilement horizontal :

<FluentDataGrid Items="@people" Style="overflow-x: auto; max-width: 800px;">
    <PropertyColumn Property="@(p => p.Id)" Width="80px" Pin="DataGridColumnPin.Left" />
    <PropertyColumn Property="@(p => p.Name)" Width="200px" Pin="DataGridColumnPin.Left" />
    <PropertyColumn Property="@(p => p.Email)" Width="300px" />
    <PropertyColumn Property="@(p => p.City)" Width="200px" />
    <PropertyColumn Property="@(p => p.Country)" Width="200px" />
    <PropertyColumn Property="@(p => p.Actions)" Width="100px" Pin="DataGridColumnPin.Right" />
</FluentDataGrid>

Les colonnes épinglées nécessitent une largeur explicite en pixels et doivent être contiguës (toutes les colonnes épinglées à gauche doivent être en premier, toutes celles épinglées à droite en dernier). La grille valide ces règles et lève une exception descriptive en cas de configuration invalide.

HierarchicalSelectColumn

Un nouveau type de colonne qui fournit un comportement de sélection parent-enfant, permettant aux utilisateurs de sélectionner des groupes de lignes liées via une case à cocher hiérarchique.

Autres améliorations du DataGrid

Fonctionnalité / Correction PR
Paramètre StripedRows pour l’alternance des styles de lignes #4594
Paramètre DisableCellFocus #4653
Callback d’événement OnSortChanged #4572
Ignorer le délai de debounce au premier appel du provider avec virtualisation #4679
Correction des SelectedItems désélectionnés lors de la pagination/virtualisation #4624
Correction des problèmes de largeur #4588

Calendrier & DatePicker

  • Paramètres MinDate et MaxDate : vous pouvez désormais restreindre la plage de dates sélectionnables :
<FluentCalendar @bind-Value="@selectedDate"
                MinDate="@DateTime.Today"
                MaxDate="@DateTime.Today.AddMonths(3)" />
  • Vue année : année courante centrée — Le sélecteur d’année place désormais l’année en cours au milieu pour une meilleure ergonomie.
  • Correction : navigation mois/année bloquée — Résolution d’un problème où cliquer sur le mois ou l’année pouvait laisser le calendrier dans un état bloqué.
  • DatePicker : largeur transmise — Le paramètre Width est désormais correctement transmis au FluentTextInput sous-jacent.

Améliorations des composants

Composant / Zone Changement PR
FluentLink Prise en charge des liens cliquables avec événements OnClick et styles de survol améliorés #4649
Badge Ajout des classes CSS .fluent-badge pour la personnalisation #4597
AppBar Possibilité de masquer la barre active, rendu de la barre active en mode horizontal #4581
AppBar Calcul dynamique de la hauteur de la barre active #4580
Nav Amélioration du support de l’accessibilité (a11y) #4553
Nav Refactoring et corrections de bugs #4550
DragContainer/DropZone Passage de Action à EventCallback pour les gestionnaires d’événements #4590
Checkbox Correction de la logique “checked” pour respecter le paramètre ThreeState #4634
Accordion Correction de l’événement change pour ne se déclencher que pour les éléments fluent-accordion #4600
List Refactoring de OptionSelectedComparer pour utiliser IEqualityComparer #4666
Placeholder Correction d’une erreur de rendu du placeholder #4618
Événements personnalisés Renommage des événements personnalisés pour éviter une exception .NET 11 #4607

Localisation

En s’appuyant sur le système de localisation introduit dans la RC1 :

  • Chaînes localisables du Paginator (#4672) — Toutes les chaînes du Paginator (libellés de page, boutons de navigation) sont désormais localisables via IFluentLocalizer.
  • Référence des paires clé-valeur de traduction (#4660) — La documentation inclut désormais un tableau complet de toutes les clés de traduction par défaut et leurs valeurs, facilitant l’implémentation de IFluentLocalizer.

Serveur MCP & Outillage

  • Service de migration v4 → v5 (#4546) — Un nouveau service de migration et des ressources pour aider à automatiser la transition de la v4 à la v5 via le serveur MCP.
  • ModelContextProtocol mis à jour en v1.1.0 (#4604) — Le serveur MCP utilise désormais la dernière version du protocole MCP.
  • Documentation des AI Skills et interface de téléchargement (#4528) — Documentation des AI Skills disponibles dans la bibliothèque, avec une interface de téléchargement.
  • Outils de compatibilité de version (#4527) — Nouveaux outils et documentation pour vérifier la compatibilité des versions entre les packages FluentUI Blazor.

Essayez-le maintenant

Ressource Lien
NuGet Microsoft.FluentUI.AspNetCore.Components --prerelease
Documentation https://v5.fluentui-blazor.net
GitHub https://github.com/microsoft/fluentui-blazor
Guide de migration Migration vers la v5

Il s’agit encore d’une Release Candidate — la surface d’API est stabilisée, mais nous continuons à compter sur la communauté pour nous aider à identifier les problèmes restants avant la version finale. N’hésitez pas à signaler des issues sur GitHub et à contribuer.

Nous travaillons encore sur les éléments restants pour la version finale : dev-v5 - Liste TODO

Merci à tous ceux qui ont contribué, testé et fourni des retours. Un grand bravo aux contributeurs de la communauté qui ont apporté des contributions significatives à cette version !

Happy Blazoring !