Blog of Denis VOITURON

for a better .NET world

FluentUI.Blazor v4.3

Posted on 2024-01-08


We’ve just released a new version 4.3 of Microsoft.FluentUI.AspNetCore.Components. This release corrects some bugs detected in recent days, but also adds a few new features.

New features

Wizard component

The Wizards have a step-by-step user interface used to break down complex tasks into comprehensible elements. The simplified presentation makes it easier for the reader to understand the scope of a given task and the actions required to complete it.

By default, steps are displayed on the left, but you can move them to the top of the component. They take the form of circular bubbles, with a tick indicating whether or not they have been processed. They are not numbered, but the DisplayStepNumber property lets you add this numbering. These bubbles can also be customized via the IconPrevious, IconCurrent and IconNext properties.

The order of the steps must be defined when designing the wizard. However, it is possible to enable or disable a step via the Disabled property.

By default, the contents of all steps are hidden and displayed when the user arrives at this step (for display performance reasons). But the DeferredLoading property reverses this process and generates the content of the active step only.

The Label and Summary properties display the name and a small summary of the step below or next to the bubble. The StepTitleHiddenWhen property hides this title and summary when the screen width is reduced, for example on mobile devices. By default, the value XsAndDown is applied to hide this data on cell phones (< 600px).

All these areas (bubbles at left/top and navigation buttons at bottom) are fully customizable using the the StepTemplate and ButtonTemplate properties (see the second example on this page). You can customize button labels using the ButtonTemplate or by modifying the static properties FluentWizard.LabelButtonPrevious / LabelButtonNext / LabelButtonDone.


Progress and ProgressRing - Stroke and Color

The two components FluentProgress and FluentProgressRing have two new attributes: Stroke and Color: (PR 1121)

FluentUI Progress Stroke

Tab - Visible

Added a Visible property to the FluentTab component to hide it if necessary (PR 1132).

Toast - Percentage

The current ProgressToast component displays a percentage sign below the progress bar, whether the progress state is determined or undetermined. This update displays the percentage sign only if the ProgressToastContent.Progress property is not null. (PR 1138).

Dialog - OnDialogClosing et OnDialogOpened

Sometimes, the developer may wish to interact with the way the dialog box opens or closes. For example, by adding a fade effect or moving the window. It is now possible to capture these two events and call/inject the code required for these effects.

You’ll find this example in our documentation.

FluentUI Dialog Effect


This Microsoft article explains how to load JavaScript (JS) into a Blazor web application with server-side static rendering (static SSR) and improved navigation.

Some applications depend on JS to perform initialization tasks specific to each page. When using Blazor’s enhanced navigation feature, which allows the user to avoid reloading the entire page, the page-specific JS may not be executed again as expected each time an enhanced page navigation occurs.

To avoid this problem, we’ve added the PageScript component, which you can use like this :

<PageScript Src="./Components/Pages/PageWithScript.razor.js" />

In the Blazor Web application, add the collocated JS file :

/* Components/Pages/PageWithScript.razor.js */

export function onLoad() {

export function onUpdate() {

export function onDispose() {

Icons Explorer - Search on all sizes

Updated the icon size list to include an “All” item. This allows the user to search for all icons. In this case, a small “Size” label is displayed at the top of the Icon.

FluentUI Icon Explorer

Documentation Navigation

The navigation of the documentation / demo site has been updated to group components by category:

FluentUI Demo Navigation

Additions and corrections


Numerous fixes have been implemented to ensure that pages and layouts get the right set of @rendermode attributes and NavMenu options depending on the interactivity choices made when creating an application.

Install the Visual Studio template using this link.

Preview NuGet Feed

If you want to keep up with what we’re building, we have a feed available that hosts the packages for the core library that are built with each commit we make to the dev branch. The address of the feed is https://pkgs.dev.azure.com/fluent-blazor/public/_packaging/previews/nuget/v3/index.json

This is not a stream to be used in production. It is directly linked to our development branch. It is therefore possible (probable) that certain Packages may cause problems for a few hours, the time it takes to detect and correct them.

Web sites


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



Follow me

Recent posts