Fluent UI Blazor v5 est disponible !
Nous sommes très heureux d’annoncer la publication de la version finale de Fluent UI Blazor v5 !
Après cinq Release Candidates, de nombreux retours de la communauté et un important travail de fond, cette nouvelle version majeure est désormais stable et disponible sur NuGet. Elle propose une base modernisée, plus cohérente avec l’écosystème Fluent UI actuel, plus performante dans Blazor et plus facile à faire évoluer.
La v5 ne se limite pas à mettre à jour la v4 : elle renouvelle les fondations de la bibliothèque. Elle adopte les nouveaux Fluent UI Web Components, rapproche les API des composants de celles de Fluent UI React, optimise le rendu Blazor et les performances dans le navigateur, et réorganise en profondeur les styles.
Découvrez la version finale et tous ses exemples sur le site de démonstration Fluent UI Blazor v5.
La version 5 est disponible sur NuGet
Les développeurs peuvent choisir de configurer leur application manuellement ou de partir d’un modèle de projet Blazor prêt à l’emploi.
La procédure manuelle complète est disponible sur la page d’installation de Fluent UI Blazor. Les principales étapes sont les suivantes :
- Installer le package NuGet — ajoutez le package Fluent UI Blazor v5 à votre application.
- Ajouter les imports — rendez les espaces de noms des composants accessibles à vos fichiers Razor.
- Enregistrer les services Fluent UI — enregistrez les services de la bibliothèque lors de la configuration de l’application.
- Ajouter les composants requis au layout — placez dans votre layout principal les providers nécessaires aux composants Fluent UI.
- Vérifier le mode de rendu — assurez-vous que le mode de rendu Blazor sélectionné prend en charge l’interactivité requise par vos composants.
- Tester l’installation — ajoutez un composant Fluent UI à une page, puis exécutez l’application et vérifiez qu’il s’affiche et fonctionne correctement.
Exemple:
@page "/counter"
@inject IDialogService DialogService
@* Apply an "interactive" render mode, or set the render mode globally for all routes *@
@rendermode InteractiveServer
<PageTitle>Counter</PageTitle>
<h1>Counter</h1>
<FluentStack Orientation="Orientation.Vertical">
<FluentButton Appearance="ButtonAppearance.Primary"
OnClick="@IncrementCountAsync">
Click me
</FluentButton>
<FluentLabel Margin="@Margin.Vertical4">
Current count: @currentCount
</FluentLabel>
</FluentStack>
@code {
private int currentCount = 0;
private async Task IncrementCountAsync()
{
currentCount++;
await DialogService.ShowInfoAsync("Counter Incremented");
}
}
Pourquoi la v5 contient-elle des Breaking Changes ?
Une nouvelle version majeure est le bon moment pour faire évoluer les fondations d’une bibliothèque. Pour Fluent UI Blazor v5, conserver une compatibilité totale avec la v4 aurait empêché plusieurs améliorations essentielles.
La v5 est donc une migration, et non une simple mise à jour de package. Les changements d’API ont été réalisés pour quatre raisons principales.
De nouveaux Fluent UI Web Components
La v4 reposait sur la génération précédente des composants web Fluent UI. La v5 utilise les nouveaux Fluent UI Web Components 3.x, développés sur une base plus moderne.
Ce changement apporte un rendu plus proche du langage Fluent 2 actuel, une meilleure accessibilité, un code JavaScript plus léger et des comportements plus cohérents entre les composants.
Des API alignées sur Fluent UI React
Lorsque cela était pertinent, les noms des propriétés, les valeurs d’énumération et les comportements ont été rapprochés de ceux de Fluent UI React.
Cet alignement facilite le passage d’une technologie Fluent UI à une autre, rend la documentation Microsoft plus facile à transposer et réduit les différences conceptuelles entre les implémentations React, Web Components et Blazor. Il implique cependant le renommage ou la réorganisation de certains paramètres existants.
Un rendu Blazor plus efficace
De nombreux composants ont été repensés afin de réduire les allocations, les re-rendus inutiles et les échanges entre .NET et JavaScript. Cela concerne notamment les listes, les menus, les services de notification, le layout et le DataGrid.
La v5 prend également mieux en charge les différents modes de rendu Blazor
De meilleures performances dans le navigateur
Plusieurs traitements ont été rapprochés du navigateur lorsqu’il est plus efficace de les exécuter côté client. Le nouveau FluentOverflow, par exemple, calcule directement les éléments masqués dans son Web Component. Les styles sont chargés et réappliqués plus efficacement, y compris lors de la navigation enrichie de Blazor.
Des styles réorganisés et améliorés
Les styles ont été revus pour mieux suivre les design tokens Fluent UI, améliorer les thèmes clair et sombre, simplifier les personnalisations et garantir un rendu plus homogène.
Certaines classes CSS internes de la v4 ont disparu ou ont changé. Si votre application surcharge directement les styles internes des composants, vérifiez attentivement ces personnalisations pendant la migration.
Le guide de migration v4 vers v5 documente les changements généraux, les composants renommés, les propriétés modifiées et les composants retirés.
Les composants disponibles dans Fluent UI Blazor v5
La v5 propose un catalogue complet couvrant la saisie, la navigation, l’affichage de données, les notifications, les layouts et la visualisation. Chaque lien ci-dessous ouvre la documentation et les exemples interactifs correspondants.
Actions et commandes
| Composant | À quoi sert-il ? |
|---|---|
FluentButton |
Déclenche une action avec les apparences, tailles, formes, icônes et états de chargement Fluent UI. |
FluentAnchorButton |
Présente un lien de navigation avec l’apparence d’un bouton et l’intégration de la navigation Blazor. |
FluentCompoundButton |
Affiche un bouton enrichi d’un texte secondaire pour mieux expliquer son action. |
FluentMenuButton |
Associe un bouton à l’ouverture d’un menu de commandes. |
FluentSplitButton |
Sépare une action principale d’un menu proposant des actions alternatives. |
FluentToggleButton |
Représente une commande à deux états, activée ou désactivée. |
FluentAppBar |
Organisent une barre d’actions responsive dont les commandes peuvent basculer dans un menu de débordement. |
FluentMenu |
Construisent des menus accessibles, pilotables par le clavier ou par code. |
FluentOverflow |
Détecte les éléments qui ne tiennent plus dans l’espace disponible et les déplace dans un menu. |
Champs, formulaires et sélection
| Composant | À quoi sert-il ? |
|---|---|
FluentTextInput |
Saisit une valeur texte sur une ligne avec validation, libellé, préfixes et suffixes. |
FluentTextArea |
Saisit un texte multiligne, avec redimensionnement et intégration aux formulaires Blazor. |
FluentNumberInput |
Saisit une valeur numérique avec bornes, pas et formatage. |
FluentCheckbox |
Sélectionne une valeur booléenne, avec prise en charge optionnelle d’un troisième état. |
FluentSwitch |
Active ou désactive immédiatement une fonctionnalité ou un réglage. |
FluentRadio |
Permettent de choisir une seule valeur parmi plusieurs options. |
FluentSlider |
Sélectionne une valeur dans une plage continue ou discrète. |
FluentSelect |
Proposent une sélection simple dans une liste déroulante. |
FluentCombobox |
Combine saisie libre et sélection d’une option dans une liste. |
FluentListbox |
Affichent une liste d’options sélectionnables, en sélection simple ou multiple. |
FluentAutocomplete |
Recherche et sélectionne une ou plusieurs valeurs avec filtrage asynchrone et modèles personnalisés. |
FluentCalendar |
Affiche un calendrier interactif pour sélectionner une date. |
FluentDatePicker |
Saisit une date dans un champ associé à un calendrier. |
FluentTimePicker |
Saisit une heure dans une liste adaptée à la culture courante. |
FluentColorPicker |
Sélectionnent une couleur dans une palette, une roue ou un carré HSV, directement ou dans un champ compact. |
FluentInputFile |
Téléverse un ou plusieurs fichiers avec progression, validation et aperçu. |
FluentField |
Structure un champ de formulaire avec libellé, aide, validation et contenu associé. |
FluentLabel |
Affiche le libellé accessible d’un contrôle de formulaire. |
FluentLabelInfo |
Ajoute une aide contextuelle à un libellé dans un popover d’information. |
FluentValidationMessage |
Affichent les erreurs de validation Blazor avec les styles Fluent UI. |
Navigation et organisation du contenu
| Composant | À quoi sert-il ? |
|---|---|
FluentAccordion |
Organisent du contenu dans des sections extensibles et repliables. |
FluentTabs |
Répartissent plusieurs vues dans une navigation par onglets. |
FluentNav |
Construisent la navigation hiérarchique d’une application avec catégories, icônes et états actifs. |
FluentTreeView |
Affichent et manipulent des données hiérarchiques sous forme d’arborescence. |
FluentWizard |
Guident l’utilisateur à travers une suite d’étapes avec navigation et validation. |
FluentLink |
Affiche un lien Fluent UI utilisant la navigation Blazor pour les URL internes. |
FluentKeyCode |
Détectent des touches ou des raccourcis clavier dans une zone donnée. |
FluentPullToRefresh |
Actualise un contenu par un geste de glissement, notamment sur les appareils tactiles. |
Mise en page
| Composant | À quoi sert-il ? |
|---|---|
FluentLayout |
Définissent le layout responsive complet d’une application avec en-tête, navigation, contenu et pied de page. |
FluentGrid |
Organisent le contenu dans une grille responsive à douze colonnes. |
FluentStack |
Aligne des éléments horizontalement ou verticalement avec espacement et distribution contrôlés. |
FluentSpacer |
Ajoute un espace flexible entre des éléments d’un layout. |
FluentMultiSplitter |
Créent plusieurs panneaux redimensionnables par glisser-déposer. |
FluentDivider |
Sépare visuellement des groupes de contenu. |
FluentCard |
Regroupe des informations et des actions dans une surface Fluent UI. |
Données, listes et interactions
| Composant | À quoi sert-il ? |
|---|---|
FluentDataGrid |
Affiche des données tabulaires avec tri, pagination, virtualisation, colonnes épinglées ou réorganisables, hiérarchies et lignes maître/détail. |
FluentPaginator |
Pilote la pagination d’une collection ou d’un DataGrid. |
FluentSortableList |
Réorganise une liste par glisser-déposer. |
FluentDragContainer |
Créent des scénarios de glisser-déposer entre plusieurs zones. |
FluentRatingDisplay |
Affiche une note sous forme d’étoiles, en lecture seule. |
| Table HTML stylée | Applique les styles Fluent UI à une table HTML native légère. |
Dialogues, messages et retours utilisateur
| Composant | À quoi sert-il ? |
|---|---|
FluentDialog |
Affichent des boîtes de dialogue modales, déclaratives ou ouvertes via IDialogService. |
FluentDrawer |
Présente un panneau latéral pour afficher des détails, un formulaire ou des actions secondaires. |
FluentMessageBox |
Ouvre rapidement une boîte de confirmation ou d’information standard. |
FluentMessageBar |
Affichent des messages persistants de succès, d’avertissement, d’information ou d’erreur. |
FluentToast |
Affichent des notifications temporaires, y compris des opérations avec progression. |
FluentTooltip |
Présentent une information courte au survol ou à la prise de focus. |
FluentPopover |
Positionne un contenu contextuel à proximité d’un élément cible. |
FluentOverlay |
Recouvre une zone ou l’application pendant un traitement bloquant. |
FluentProgressBar |
Représente l’avancement déterminé ou indéterminé d’une opération. |
FluentSpinner |
Signale visuellement qu’un chargement ou un traitement est en cours. |
FluentSkeleton |
Affiche une structure temporaire pendant le chargement du contenu. |
FluentErrorBoundary |
Intercepte les erreurs de rendu Blazor et affiche une interface de récupération cohérente. |
Texte, médias et présentation
| Composant | À quoi sert-il ? |
|---|---|
FluentText |
Applique la typographie Fluent UI au texte : taille, graisse, alignement et troncature. |
FluentIcon |
Affiche une icône Fluent UI System Icon ou une icône personnalisée. |
FluentEmoji |
Affiche un emoji de la collection Microsoft Fluent Emoji. |
FluentImage |
Affiche une image avec des options de taille, d’ajustement et de forme. |
FluentAvatar |
Représente une personne ou une entité avec une image, des initiales, une icône ou un badge de présence. |
FluentBadge |
Met en évidence une catégorie, un état ou une courte information. |
FluentCounterBadge |
Affiche un compteur, par exemple le nombre de notifications non lues. |
FluentPresenceBadge |
Indique la disponibilité ou le statut d’une personne. |
FluentHighlighter |
Met en évidence les occurrences recherchées dans un texte. |
Graphiques
Les graphiques sont distribués dans le package optionnel Microsoft.FluentUI.AspNetCore.Components.Charts.
| Composant | À quoi sert-il ? |
|---|---|
FluentAreaChart |
Représente l’évolution d’une ou plusieurs séries avec des courbes et des surfaces remplies. |
FluentDonutChart |
Compare les proportions de plusieurs catégories dans un graphique en anneau. |
FluentFunnelChart |
Visualise les étapes successives d’un processus et leur taux de conversion. |
FluentGanttChart |
Positionne des tâches ou des événements sur une chronologie. |
FluentHorizontalBarChart |
Compare des valeurs avec des barres horizontales simples ou empilées. |
FluentHorizontalBarChartWithAxis |
Affiche des barres horizontales avec axes, graduations et libellés configurables. |
Infrastructure commune
Le composant FluentProviders regroupe les providers nécessaires aux dialogues, toasts, info-bulles, messages et overlays. La v5 propose également une API de thèmes pour appliquer une couleur de marque, basculer entre les modes clair et sombre, utiliser les thèmes Teams et personnaliser les design tokens.
Migrer depuis Fluent UI Blazor v4
Commencez par remplacer les références de packages v4 par la version 5.0.0, puis compilez votre application afin d’identifier les changements d’API. Le guide de migration détaille ensuite les adaptations composant par composant :
- les composants renommés ou retirés ;
- les paramètres et événements renommés ;
- les nouvelles valeurs d’énumération ;
- les changements de structure du balisage ;
- les sélecteurs CSS à adapter ;
- les nouveaux services et providers.
Consultez le guide complet de migration v4 vers v5 avant de mettre à jour une application existante.
Le serveur MCP Fluent UI Blazor peut également aider les assistants de développement compatibles à rechercher les composants, leurs paramètres, leurs événements et les informations de migration.
Maintenance de la version 4
La version 4 reste disponible et continuera à être maintenue pendant quelques semaines, afin de laisser aux applications existantes le temps d’organiser leur migration.
Cette maintenance sera toutefois limitée aux correctifs de sécurité indispensables. La v4 ne recevra plus de nouvelles fonctionnalités, de nouveaux composants ni d’améliorations fonctionnelles. Tous les nouveaux développements seront réalisés exclusivement dans la branche v5.
Nous recommandons donc de planifier dès maintenant la migration des applications actives vers Fluent UI Blazor v5.
Ressources
| Ressource | Lien |
|---|---|
| NuGet | Microsoft.FluentUI.AspNetCore.Components |
| Documentation et démonstration | https://v5.fluentui-blazor.net |
| Guide de migration | Migration de la v4 vers la v5 |
| GitHub | https://github.com/microsoft/fluentui-blazor |
| Serveur MCP | Documentation du serveur MCP |
Cette version finale est l’aboutissement de nombreux mois de conception, de développement, de tests et d’échanges. Merci à toutes les personnes qui ont essayé les Release Candidates, signalé des problèmes, proposé des améliorations, contribué au code et enrichi la documentation.
Nous avons hâte de découvrir les applications que vous allez construire avec Fluent UI Blazor v5 !