Fluent UI Blazor v5 est dans la dernière ligne droite de développement. La RC1 a été distribuée mi-février. Il s'agit d'une évolution importante de la librairie s'appuyant sur les composants Fluent UI Web. La librairie repose désormais sur Fluent UI Web Components v3 qui est largement utilisé par Microsoft (Teams, 365, WIndows).  Cette v5 promet :

- avoir une interface et un look&fell identique aux productions Microsoft

- meilleures performances

- des composants plus légers et plus effiaces

- temps de chargement réduits

- amélioration l'accessibilité avec le support de WCAG 2.1 AA

Cette v5 introduit un tout nouveau FluentLayout : approche déclarative, composition plus flexible et plus rapide. Le composant clé est le FluentLayoutItem :

@inherits LayoutComponentBase

<FluentLayout>

    <!-- Header -->

    <FluentLayoutItem Area="@LayoutArea.Header">

        <FluentStack VerticalAlignment="VerticalAlignment.Center">

            <FluentLayoutHamburger />

            <FluentText Weight="TextWeight.Bold"

                        Size="TextSize.Size400">

                My Application

            </FluentText>

            <FluentSpacer />

        </FluentStack>

    </FluentLayoutItem>

    <!-- Navigation -->

    <FluentLayoutItem Area="@LayoutArea.Navigation"

                      Width="250px">

        <NavMenu />

    </FluentLayoutItem>

    <!-- Content -->

    <FluentLayoutItem Area="@LayoutArea.Content"

                      Padding="@Padding.All3">

        @Body

    </FluentLayoutItem>

    <!-- Footer -->

    <FluentLayoutItem Area="@LayoutArea.Footer">

        Powered by Microsoft Fluent UI Blazor

    </FluentLayoutItem>

</FluentLayout>

<FluentProviders />

Pour utiliser la lib, il faut installer les paquets NuGet et ajouter le namespace. 

Autre nouveauté : le Default Value. Vous définissez des valeurs de paramètres globales qui seront reprises pour tous les composants Fluent UI. Avant la v5, pour avoir une apparence commune à chaque boutons, il fallait le faire pour chaque objet. Maintenant, on définir une valeur globale par défaut dans Program.cs : 

builder.Services.AddFluentUIComponents(config =>

{

    // Set default values for FluentButton component

    config.DefaultValues.For<FluentButton>()

          .Set(p => p.Appearance, ButtonAppearance.Primary);

    config.DefaultValues.For<FluentButton>()

          .Set(p => p.Shape, ButtonShape.Circular);

});

= tous FluentButton de votre app utiliseront Primary et Circulaer. 

Les avantages : un source plus claire, un design par défaut généralisé sans code inutile, facile à maintenir. 

Autre nouveauté : la v5 introduit par défaut un système de localisation plus simple pour traduire toutes les chaîns des objets, les labels des boutons, des attributs ARIA, etc. Par défaut, la lib utilise la langue anglaise. Pour la localisation, on passe par l'interface IFluentLocalizer. Vous pouvez avoir plusieurs langues dans votre projet en utilisant les ressources embarquées : les fichiers .resx.

Présentation : https://baaijte.net/blog/microsoft-fluentui-aspnetcore.components-50-rc1/

Documentation : https://fluentui-blazor-v5.azurewebsites.net/