Sortie de Microsoft.FluentUI.AspNetCore.Components

Vue d’ensemble

Nous sommes heureux d’annoncer la disponibilité de Microsoft.FluentUI.AspNetCore.Components 4.0, la dernière version de notre nouvelle bibliothèque de composants graphiques au format FluentUI. Comme nous l’avons déjà mentionné sur notre GitHub, nous apportons quelques changements fondamentaux dans cette version. En bref :

• Nous changeons l’espace de noms.
• Cette version cible uniquement .NET 8 .

Namespace

Nous avons changé l’espace de nom racine de Microsoft.Fast.Components.FluentUI à Microsoft.FluentUI.AspNetCore.Components. C’est la dernière étape dans le processus d’indépendance de l’équipe FAST et de rapprochement avec l’équipe ASP.NET Core Blazor. Les parties Microsoft et FluentUI parlent d’elles-mêmes. En adoptant la partie AspNetCore.Components, nous serons en ligne avec le schéma de nommage standard des composants ASP.NET Core Blazor.

En choisissant cet espace de noms, nous laissons également de la place pour d’autres implémentations futures possibles de Fluent UI qui pourraient être distribuées par le biais de NuGet Packages. Pensez par exemple aux implémentations pour WPF, WinForms, Avalonia, Uno, etc. Bien que nous n’avons pas connaissance de plans/développements/prochaines versions de ces implémentations.

Du point de vue du code, cela signifie que vous devrez mettre à jour votre _Imports.razor et changer toutes les déclarations using... dans vos fichiers .razor et .cs de vos projets.

Vous pouvez trouver tous les NuGet v4 en recherchant [Microsoft.FluentUI.AspNetCore] (https://www.nuget.org/packages?q=Microsoft.FluentUI.AspNetCore).

Le guide de mise à jour sur le site de démonstration et de documentation décrit plus en détail ce qu’il faut faire pour passer à la dernière version.

NET 8 uniquement

Cette version ne supportera que .NET 8 et plus. Nous avons fait ce choix afin d’être en mesure de supporter pleinement les nouvelles fonctionnalités et capacités qui ont été ajoutées à Blazor depuis .NET 6. Par exemple, nous avons déjà intégré le support de @bind:after, le support des rendermodes de Blazor, le support des Sections et plus encore. Tout n’est pas encore terminé, mais nous continuerons ce travail dans les prochaines versions.

Si vous restez sur .NET 6 ou 7, la version v3 de la bibliothèque restera disponible et supportée tant que ces versions de .NET seront supportées. Cependant, il est très probable que nous n’ajouterons plus de nouvelles fonctionnalités à la version v3. Nous avons supprimé la prise en charge de .NET 8 dans la version 3.3.0 des paquets.

Donc, pour faire simple :

• Si vous choisissez .NET 6 ou 7 → utilisez v3 packages
• Si vous choisissez .NET 8 → utilisez v4 packages

Templates

Le package de templates (Microsoft.FluentUI.AspNetCore.Templates) a été complètement revu. Pour cette version, nous avons entièrement copié les nouveaux modèles standards Blazor Web App et Blazor WebAssembly Standalone App et les avons rendus au visuel de Fluent. Cela signifie que toutes les fonctionnalités et options disponibles dans les modèles standards sont également disponibles dans nos modèles. Y compris toutes les nouvelles options et pages d’authentification. Peu importe que vous travailliez avec un CLI ou à partir de Fichier → Nouveau projet dans Visual Studio.

Icons et Emojis

Nous avons centralisé des milliers d’icônes et d’emojis provenant de sites Microsoft, afin de simplifier leur utilisation dans les projets Blazor.

Sur notre site de démonstration, vous trouverez des outils de recherche d’icônes et d’emojis.

• Icon Explorer
• Emoji Explorer

Ainsi qu’un bouton vous permettant de copier le code Razor nécessaire à l’intégration de cette icône/emoji dans votre projet.

Autres modifications et corrections

• FluentAccordionItem: Ajout du paramètre HeaderTemplate
• FluentCard: Ajout de Width et Height
• FluentSplitter: Ajout de la prise en charge de la réduction du panneau 2, Ajout de OnCollapsed, OnExpanded et OnResized
• FluentToast: Le délai d’attente est désormais exprimé en millisecondes
• variables.css est importé dans la bibliothèque automatiquement chargé avec la css de la bibliothèque maintenant
• FluentToastContainer a été recommé en FluentToastProvider
• FluentMessageBarContainer a été recommé en FluentMessageBarProvider
• FluentDatePicker: Ajout de DisabledDateFunc
• Templates: Ajout d’une favicon
• Mise à jour de tous les composants d’entrée pour utiliser ReadOnly au lieu d’un mélange d’orthographes possibles

Nous avons supprimé le composant FluentCodeEditor car il manquait de fonctionnalités et n’avait pas d’aspects de conception Fluent. Nous vous recommandons d’utiliser le composant BlazorMonaco en remplacement.

Vous n’avez plus besoin de fournir une configuration HostingModel à la méthode d’extension AddFluentUIComponents. Cette énumération HostingModel existait pour les implémentations antérieures d’icônes et d’emoji et ne sont plus nécessaire.

Site de démonstrations et de documentation

• Mise à jour du style du site (le menu de navigation et le corps du site défilent désormais indépendamment l’un de l’autre, le côté est attaché)
• Le style de mise en évidence initial après rafraîchissement n’était pas correctement mis à jour en mode clair/foncé
• Ajout d’une favicon
• Déplacement de CacheStorageAccessor et StaticAssetService vers le projet de démonstration car ils sont spécifiques au site et non à la bibliothèque.

Présentation à la DotNetConf 2023

Ce jeudi, Vincent et moi présenterons cette nouvelle version à la [.NET Conf 2023] (https://www.dotnetconf.net/agenda).

Unlocking the power of the Fluent UI Blazor components

Dive into the world of Fluent UI and discover how to leverage its seamless integration with Blazor for building web and mobile applications. In this presentation, we’ll take you on a journey to explore the fundamentals and building blocks of the library and demonstrate how to quickly incorporate it into your Blazor projects. Learn the basics of setting up the environment, use the interactive components, and change the styling of your application with Fluent UI design tokens. Whether you’re a seasoned Blazor developer or just getting started, join us to learn how to create visually appealing and user-friendly applications with the Fluent UI Blazor library.

Pendant 20 minutes, nous allons créer cet exemple de démo à partir d’un projet vide.

Feedback

Si vous trouvez quelque chose qui sort de l’ordinaire, faites-le nous savoir dans le repo sur GitHub, ou Twitter / X.