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. Here is everything we added or changed in version 1.5:
- New component:
- New component:
- New and updated icons
And some more ‘under the hood’ changes:
- Added an example showing inheriting to bind to the
- Changed enum names to match Web Components names
FluentIconinstead of SVGs in example pages
- Added support for more event handling
- Added support for more bindings
- Other changes
A new addition to the Fluent UI Web Components is the
FluentSearchcomponent (example here). Of course we’ve brought this over to the Blazor component set as well. It looks like this:
Another addition to the Web Components is the
FluentCalendar component (example here). 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.
The changes and additions described below are a bit more low-level and more for developers than for end-users of the library.
New and updated icons
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 to bind to
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 so we have re-implemented most of the enum types. 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.
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)
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:
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.
Here’s an example of this kind of event handling:
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 the ActiveId parameter to the id of the active tab
FluentTreeView: Bind the
CurrentSelectedparameter to the currently selected tree item
FluentCalendar: Bind the
SelectedDatesparameter to the
DateOnlyof selected dates
FluentAccordion* : Bind the
ActiveIdparameter to the id of the active accordion item
* not fully implemented yet. We are waiting for the necessary changes in the underlying web components implementation.
Here’s an example of a binding with the
More examples of the bindings can be found in the Pages folder under examples/FluentUI.Demo.Shared/ folder.
Some other (smaller) changes we have made to the library are:
- Added Disabled and Text parameters to
- Added Heading parameter to
- AddedTextparameter to
- Fixed working the
FluentCalendar(defaults to true)
FluentCalendar(defaults to true)
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 continue to keep you up to date as these versions ship.
Top comments (0)