Announcing Microsoft.FluentUI.AspNetCore.Components

Overview

We are happy to announce the availability of Microsoft.FluentUI.AspNetCore.Components 4.0, the latest version of our new library of graphic components in FluentUI format. As we mentioned already on our GitHub discussion feed, we are making some fundamental changes in this one. In short:

• We are changing the root namespace
• This version targets .NET 8 only .

Namespace change

We are changing the root namespace from Microsoft.Fast.Components.FluentUI to Microsoft.FluentUI.AspNetCore.Components. This is the last step in the the process of becoming independent from the FAST team and getting closer aligned to the ASP.NET Core Blazor team. The Microsoft and FluentUI parts speak for themselves, we think. By adopting the AspNetCore.Components part we will be in line with the standard ASP.NET Core Blazor component naming scheme.

By choosing this namespace scheme, we also leave room for other possible future Fluent UI implementations that might get distributed by means of NuGet Packages. Think for example about implementations for WPF, WinForms, Avalonia, Uno, etc. We do not have knowledge of any plans/development/upcoming releases of any of these.

From a code perspective this means you will need to update your _Imports.razor and change all using ... statements in your .razor and .cs files in your projects.

You can find all the available v4 packages on NuGet by searching for Microsoft.FluentUI.AspNetCore.

The Upgrade guide on the demo and documentation site describes more on what is needed to upgrade to the latest version.

NET 8 only

This version will only support .NET 8 and higher. We made this choice to be able to fully support new functionality and capabilities that have been added to Blazor since .NET 6. Some of the things we are already changing: support for @bind:after, support the Blazor rendermodes, support for Sections and more. Not all is done yet, but we will continue this work in upcoming point releases.

If you are staying on .NET 6 or 7, the v3 version of the library will remain available and supported as long as those versions of .NET are supported. Most probably though, we will not be adding any new functionality to the v3 version anymore. We have removed .NET 8 support in the 3.3.0 version of the packages

So, simply put:

• You target .NET 6 or 7 → Use the v3 packages
• You target .NET 8 → Use the v4 packages

Templates

The templates package (Microsoft.FluentUI.AspNetCore.Templates) has been completely overhauled. For this version we fully copied the new standard Blazor Web App and Blazor WebAssembly Standalone App templates and made them look Fluent. This means every feature and option that is available in the standard templates is available in our templates as well. Including all the new authentication options and pages. It does not matter whether you are working with a CLI or from File → New project in Visual Studio.

Icons and Emojis

We’ve centralized thousands of icons and emojis from Microsoft sites, to simplify their use in Blazor projects.

On our demo site, you’ll find tools for searching for icons and emojis.

• Icon Explorer
• Emoji Explorer

As well as a button enabling you to copy the Razor code needed to integrate this icon/emoji into your project.

Other changes and fixes

• FluentAccordionItem: Add HeaderTemplate parameter
• FluentCard: Add Width and Height + docs/examples
• FluentSplitter: Add support for collapsing panel 2 (right/bottom), add OnCollapsed, OnExpanded and OnResized event callbacks
• FluentToast: Timeout is now in milliseconds
• variables.css is imported in the automatically loaded with the library’s css now
• FluentToastContainer renamed to FluentToastProvider
• FluentMessageBarContainer renamed to FluentMessageBarProvider
• FluentDatePicker: Support DisabledDateFunc
• Templates: Add favicon
• Update all input component to use ReadOnly instead of a mix of possible spellings

We have removed the FluentCodeEditor component because it lacked features and has no Fluent design aspects. We recommend you use the BlazorMonaco component as a replacement

You no longer need to supply a HostingModel configuration to the AddFluentUIComponents extension method. This HostingModel enumeration existed for earlier icon and emoji implementations and was no longer necessary.

Demos and documentation site

• Update site styling (navigation menu and body now scroll independently, aside is sticky)
• Initial Highlight style after refresh was not correctly updated to light/dark mode
• Added favicon
• Move CacheStorageAccessor and StaticAssetService to demo project as these are specific to the site and not the library

DotNetConf Presentation

This Thursday, Vincent and I will be presenting this new version at .NET Conf 2023.

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.

For 20 minutes, we’ll be creating this sample demo from scratch.

Feedback

If you find something out of the ordinary, let us know in the repo on GitHub, or Twitter / X.