FluentUI.Blazor v5.rc1

Annonce de Fluent UI Blazor v5 RC1 — Une nouvelle ère pour Fluent UI dans Blazor

Aujourd’hui, nous sommes ravis de publier la première Release Candidate de la bibliothèque Fluent UI Blazor v5 ! Cette version majeure marque une évolution significative pour la bibliothèque, apportant une nouvelle fondation construite sur les derniers Fluent UI Web Components, un nouveau composant FluentLayout puissant, un système révolutionnaire de valeurs par défaut, et un support de localisation de première classe. Et plein de nouveaux composants plus performants les uns que les autres.

Explorons ensemble les nouveautés et pourquoi nous pensons que la v5 est la meilleure version de Fluent UI Blazor à ce jour.

Une nouvelle fondation : Fluent UI Web Components 3.x

La version 5 représente un changement fondamental dans la couche de rendu sous-jacente. La bibliothèque s’est éloignée des web components précédents basés sur FAST pour adopter les nouveaux Fluent UI Web Components 3.x — les mêmes composants qui alimentent les propres produits de Microsoft comme Microsoft 365, Teams et Windows 11.

Qu’est-ce que cela signifie pour vous ?

• Design Fluent 2 au pixel près — Vos composants Blazor s’affichent maintenant avec exactement le même aspect et la même sensation que les propres produits de Microsoft. Fini les différences visuelles subtiles.
• Meilleures performances — Les nouveaux web components sont plus légers et plus efficaces. L’empreinte JavaScript réduite conduit à des temps de chargement initiaux plus rapides et des interactions plus fluides.
• Accessibilité améliorée — L’accessibilité est une priorité de premier ordre dans la nouvelle couche de web components, offrant une conformité WCAG 2.1 AA dès le départ.
• Taille de bundle réduite — En supprimant la dépendance héritée FAST, la taille globale du package a été considérablement réduite.

Qu’est-ce qui change dans votre code ?

Pour la plupart des composants existants, la migration est transparente — votre balisage Blazor reste le même. La bibliothèque expose toujours les mêmes FluentButton, FluentSelect et autres composants que vous connaissez déjà. Sous le capot, ces composants rendent maintenant les nouveaux Fluent UI Web Components.

Par contre, nous avons parfois ete contrains de modifier en profondeur certains composants: dans le nom ou dans les arguments. Vous pouvez consulter cette page de migration pour y voir tous ces changements.

De plus, nous mettons egalement un MCP Server dedie a cette nouvelle bibliotheque. Il sera votre nouvel assistant de migration et de developpement au quotidien.

Aucune référence supplémentaire à des fichiers JavaScript ou CSS n’est requise — la bibliothèque gère tout automatiquement. Les scripts des web components sont inclus et chargés par la bibliothèque elle-même.

Pour commencer

Installez les packages NuGet :

dotnet add package Microsoft.FluentUI.AspNetCore.Components --prerelease
dotnet add package Microsoft.FluentUI.AspNetCore.Components.Icons

Ajoutez l’espace de noms à votre fichier _Imports.razor :

@using Microsoft.FluentUI.AspNetCore.Components
@using Icons = Microsoft.FluentUI.AspNetCore.Components.Icons

Enregistrez les services dans Program.cs :

builder.Services.AddFluentUIComponents();

Et ajoutez le composant provider à la fin de votre fichier MainLayout.razor :

@* Ajouter tous les FluentUI Blazor Providers *@
<FluentProviders />

C’est tout. Vous êtes prêt à construire avec Fluent UI v5.

Le nouveau composant FluentLayout

La version 5 introduit un composant FluentLayout complètement repensé qui sert de structure de base pour votre application. Plutôt que de composer manuellement des layouts CSS Grid ou Flexbox, FluentLayout fournit un système déclaratif basé sur des zones pour construire des layouts pleine page avec un en-tête fixe, un panneau de navigation, une zone de contenu et un pied de page.

Layout basé sur des zones

Le concept clé est FluentLayoutItem avec une LayoutArea — vous déclarez où chaque élément de contenu doit aller, et le moteur de layout gère le reste :

@inherits LayoutComponentBase

<FluentLayout>

    <!-- En-tête -->
    <FluentLayoutItem Area="@LayoutArea.Header">
        <FluentStack VerticalAlignment="VerticalAlignment.Center">
            <FluentLayoutHamburger />
            <FluentText Weight="TextWeight.Bold"
                        Size="TextSize.Size400">
                Mon Application
            </FluentText>
            <FluentSpacer />
        </FluentStack>
    </FluentLayoutItem>

    <!-- Navigation -->
    <FluentLayoutItem Area="@LayoutArea.Navigation"
                      Width="250px">
        <NavMenu />
    </FluentLayoutItem>

    <!-- Contenu -->
    <FluentLayoutItem Area="@LayoutArea.Content"
                      Padding="@Padding.All3">
        @Body
    </FluentLayoutItem>

    <!-- Pied de page -->
    <FluentLayoutItem Area="@LayoutArea.Footer">
        Propulsé par Microsoft Fluent UI Blazor
    </FluentLayoutItem>

</FluentLayout>

<FluentProviders />

Menu hamburger intégré

Remarquez le composant FluentLayoutHamburger dans l’en-tête. Cela affiche un bouton hamburger qui bascule automatiquement le panneau de navigation — avec des animations fluides et un comportement responsive. Aucun JavaScript supplémentaire nécessaire.

Pourquoi c’est important

• Structure cohérente — Chaque page de votre application suit le même contrat de layout. Fini les dérives de layout.
• Responsive par conception — Le panneau de navigation se replie automatiquement sur les écrans plus petits.
• Zones typées — L’utilisation de LayoutArea.Header, LayoutArea.Navigation, LayoutArea.Content et LayoutArea.Footer garantit que vous ne pouvez pas mal placer le contenu.
• Dimensionnement personnalisable — Contrôlez la largeur du panneau de navigation, le padding des zones de contenu, et plus encore via des paramètres simples.

Pour plus d’exemples de layouts, visitez la documentation FluentLayout.

Valeurs par défaut — Un game changer

L’une des fonctionnalités les plus importantes et les plus attendues de la v5 est le système de valeurs par défaut. Ce mécanisme puissant vous permet de définir des valeurs de paramètres par défaut globales pour n’importe quel composant Fluent UI — une seule fois — et de les appliquer partout dans votre application.

Le problème qu’il résout

Dans la v4 et les versions antérieures, si vous vouliez que tous vos boutons utilisent une apparence spécifique, vous deviez la définir sur chaque instance :

<!-- Répétitif et sujet aux erreurs -->
<FluentButton Appearance="ButtonAppearance.Primary">Enregistrer</FluentButton>
<FluentButton Appearance="ButtonAppearance.Primary">Soumettre</FluentButton>
<FluentButton Appearance="ButtonAppearance.Primary">Confirmer</FluentButton>

C’était fastidieux, sujet aux erreurs et un cauchemar de maintenance. Changer une décision de design signifiait toucher potentiellement des centaines de fichiers.

La solution

Avec la v5, configurez les valeurs par défaut globalement dans votre Program.cs :

builder.Services.AddFluentUIComponents(config =>
{
    // Définir les valeurs par défaut pour le composant FluentButton
    config.DefaultValues.For<FluentButton>()
          .Set(p => p.Appearance, ButtonAppearance.Primary);
    config.DefaultValues.For<FluentButton>()
          .Set(p => p.Shape, ButtonShape.Circular);
});

Maintenant chaque FluentButton dans votre application utilise automatiquement l’apparence Primary et la forme Circular — sauf si vous le surchargez explicitement sur une instance spécifique :

<!-- Utilise les valeurs par défaut globales (Primary + Circular) -->
<FluentButton>Enregistrer</FluentButton>

<!-- Surcharger uniquement l'apparence pour cette instance -->
<FluentButton Appearance="ButtonAppearance.Outline">Annuler</FluentButton>

Avantages clés

Cette fonctionnalité est particulièrement puissante pour les organisations qui ont besoin d’un style de composant cohérent dans de grandes applications ou des systèmes de design partagés.

Support de localisation

La version 5 introduit un système de localisation intégré qui facilite la traduction de toutes les chaînes internes aux composants — labels de boutons, attributs ARIA, textes d’accessibilité, et plus — dans n’importe quelle langue.

Comment ça fonctionne

La bibliothèque est livrée avec des chaînes en anglais par défaut. Pour localiser les composants, implémentez l’interface IFluentLocalizer :

using Microsoft.FluentUI.AspNetCore.Components;

public class CustomFluentLocalizer : IFluentLocalizer
{
    public string this[string key, params object[] arguments]
    {
        get
        {
            return key switch
            {
                "SomeKey" => "Votre traduction personnalisée",
                "AnotherKey" => string.Format("Autre traduction {0}", arguments),

                // Retour à l'anglais si aucune traduction n'est trouvée
                _ => IFluentLocalizer.GetDefault(key, arguments),
            };
        }
    }
}

Enregistrez-le dans Program.cs :

builder.Services.AddFluentUIComponents(config =>
    config.Localizer = new CustomFluentLocalizer());

Vous pouvez aussi utiliser vos ressources embarquées (.resx) pour le support multilingue. Tout est documente sur notre site web.

Essayez-le maintenant

Ceci est une Release Candidate — la surface API est stabilisée, mais nous comptons sur la communauté pour nous aider à identifier les problèmes restants avant la version finale. Veuillez signaler les problèmes sur GitHub, et n’hésitez pas à contribuer.

Plusieurs composant n’existent pas encore, mais nous y travaillons pour la prochaine version: dev-v5 - TODO List

Merci à tous ceux qui ont contribué, testé et fourni des retours tout au long du cycle de développement de la v5. Nous sommes incroyablement enthousiastes à propos de cette version et avons hâte de voir ce que vous allez construire avec !

Bon Blazoring ! L’équipe Fluent UI Blazor