What's new in the Microsoft Fluent UI library for Blazor version 1.5
We have a nice set of changes and additions for this summer edition of the Fluent UI component library for Blazor. Not just new components, but also support for more event handling, support for more bindings, new and updated icons and changes in the demo environment. In short everything added/changed in version 1.5:
- New component:
<FluentSearch>
- New component:
<FluentCalendar>
- New and updated icons
And some more 'under the hood' changes
- Example of inheriting a component to bind to
oninput
event - Change
enum
names to match Web Components - Use
FluentIcon
instead of SVGs in example pages - Support for more event handling
- Support for more bindings
- Other changes
New component: <FluentSearch>
A new addition to the Fluent UI Web Components is the Search component. Of course we've brought this over to the Blazor component set as well. It looks like this:
New component: <FluentCalendar>
Another addition to the Web Components is the Calendar component. It has been added to the Blazor set and will, in the future, be used as part of a date picker component. It looks like this:
Note: At the moment there is still a bug in the display of the calendar when the week has a start day other than Sunday (as can be seen above). This will be fixed in a later update.
Below changes and additions are a bit more low level and more for developers than for end-users of the library.
New and updated icons
The <FluentIcon>
component uses the Fluent UI System Icons collection. We have updated and imported all the icons from version 1.1.176.
Example of inheriting component to bind to oninput
event
All the Input
related components, like FluentTextField
, FluentTextArea
and FluentNumberField
are set up to do binding on the onchange
event. In most situations this is fine but sometimes you might need a binding to occur within an oninput
event. This is possible by inheriting the component in question and changing/adding some of the parameters in the .razor
file. An example of this is now provided in the FluentNumberFieldOnInput.razor
file in the examples/FluentUI.Demo.Shared/Shared/
folder.
Change enum
names to match Web Components
There have been some massive improvements to the FAST documentation. This makes a lot of information much more discoverable. Because of this we wanted to make some changes on the Blazor side as well and we have re-implemented most of the enum
s. Initially we added these with very generic names like Direction
and Orientation
. Based on these new docs, we concluded that these should have names much more related to the components they are being used in (i.e. FlipperDirection
and TabsOrientation
). We have updated all the enumerations concerned and marked all the old ones as obsolete. These 'wrong' enums will be removed in a later version of the library.
Use FluentIcon
instead of SVGs in example pages
A lot of the examples in the demo sites were still using plain inline SVGs when showing an icon. These have all been changed to use the (recently introduced) <FluentIcon>
component.
Support for more event handling
The new docs also showed that there are events available on components which we were not yet handling on the Blazor side. Examples of these are change
events on the Accordion and Tabs components. The complete list of Blazor components with new event handling are:
Component | Event name | Arguments |
---|---|---|
<FluentTabs> | OnTabChange | TabChangeEventArgs |
<FluentTreeView> | OnSelectedChange | TreeChangeEventArgs |
<FluentTreeView> | OnExpandedChange | TreeChangeEventArgs |
<FluentCalendar> | OnDateSelected | CalendarSelectEventArgs |
<FluentAccordion> * | OnAccordionItemChange | AccordionChangeEventArgs |
<FluentDialog> | ondismiss | - |
<FluentTooltip> | ondismiss | - |
<FluentMenu> | onmenuchange | - |
<FluentHorizontalScroll> | onscrollstart | HorizontalScrollEventArgs |
<FluentHorizontalScroll> | onscrollend | HorizontalScrollEventArgs |
<FluentDataGridRow> | OnRowFocus | DataGridRowFocusedEventArgs |
All of the ...EventArgs
above, besides the HorizontalScrollEventArgs
, are coded in a way that they contain the actual affected component as a parameter. This means you can call any method or work with any parameter the component supports in the event handling code.
An example of this kind of event handling:
<FluentTreeView OnExpandedChange="HandleOnExpandedChanged"> <FluentTreeItem Text="Root item 1"> <FluentTreeItem Text="Flowers"> <FluentTreeItem Disabled="true" Text="Daisy" /> <FluentTreeItem Text="Sunflower" /> <FluentTreeItem Text="Rose" /> </FluentTreeItem> <FluentTreeItem Text="Nested item 2" /> <FluentTreeItem Text="Nested item 3" /> </FluentTreeItem> <FluentTreeItem Text="Root item 2" > <FluentDivider></FluentDivider> <FluentTreeItem Text="Flowers"> <FluentTreeItem Disabled="true" Text="Daisy" /> <FluentTreeItem Text="Sunflower" /> <FluentTreeItem Text="Rose" /> </FluentTreeItem> <FluentTreeItem Text="Nested item 2" /> <FluentTreeItem Text="Nested item 3" /> </FluentTreeItem> <FluentTreeItem Text="Root item 3 - Leaf Erikson" /> </FluentTreeView> <p>Current expanded/collapsed tree item is @currentAffected?.Text</p>
@code { FluentTreeItem? currentAffected; private void HandleOnExpandedChanged(FluentTreeItem item) { currentAffected = item; } }
More examples of event handling can be found in the Pages
folder under examples/FluentUI.Demo.Shared/
folder
Support for more bindings
We have also added support for some more bindings:
<FluentTabs>
: Bind theActiveId
parameter to theid
of the active tab<FluentTreeView>
: Bind theCurrentSelected
parameter to the currently selected tree item<FluentCalendar>
: Bind theSelectedDates
parameter to theList<DateOnly>
of selected dates<FluentAccordion>*
: Bind theActiveId
parameter to theid
of the active accordion item
*= not fully implemented yet. We are waiting for the necessary changes in the web components script.
An example of a binding with the FluentCalendar
component:
<h2>Selected dates</h2> <p> <FluentCalendar DisabledDates=@disabledDates @bind-SelectedDates =@selectedDates></FluentCalendar> </p> <p>Dates Selected:</p> <ul> @foreach(DateOnly date in selectedDates) { <li>@date.ToString("yyyy-MM-dd")</li> } </ul> @code { static int currentYear = DateTime.Now.Year; static int currentMonth = DateTime.Now.Month; static int daysInMonth = DateTime.DaysInMonth(currentYear, currentMonth) + 1; static Random random = new(); List<DateOnly> disabledDates = new(); List<DateOnly> selectedDates = new(); protected override void OnInitialized() { for (int i = 0; i < 3; i++) { disabledDates.Add(new DateOnly(currentYear, currentMonth, random.Next(1, daysInMonth))); selectedDates.Add(new DateOnly(currentYear, currentMonth, random.Next(1, daysInMonth))); }; } }
More examples of the bindings can be found in the Pages
folder under examples/FluentUI.Demo.Shared/
folder
Other changes
Some other (smaller) changes we have made to the library are:
- Added
Disabled
andText
parameters to<FluentTab>
- Added
Heading
parameter to<FluentAccordionItem>
- Added
Text
parameter to<FluentTreeItem>
- Fixed working of
ActiveIndicator
parameter on<FluentTabs>
- Add
DisabledSelectable
parameter to<FluentCalendar>
(defaults to true) - Add
OutOfMonthSelectable
parameter to<FluentCalendar>
(defaults to true)
What's next?
We are already thinking about what we could add,change and update in the next couple of releases. Please chime in with your own ideas on our GitHub Discussions or Discord channel. For sure, a (major) new release will arrive after we have updated our Blazor wrappers to the upcoming Fluent UI Web Components v3 release (no firm dates yet). We are also hard at work on improving the documentation. We are going through each and every component and if we find things like parameters or events that are present in the Web Components or underlying FAST Foundation but missing on the Blazor side, we will add them of course. This will most likely be done with minor version releases like 1.5.1, 1.5.2, etc. We will let you know of course when those will be released.
Comments
Comments are closed