Aspnetcore: Official Microsoft Fluent Design components for Blazor

[yehia2amer]

Is your feature request related to a problem? Please describe.

One of the Things that can make Blazor even more promising, is to have Open source, Enterprise ready, Native C#, Blazor UI components for things like (Layout, Navigation, Data Entry, Grids, Forms, Data Visualization, etc..). So that developers don't have to reinvent the wheel.

Also Microsoft Now do have a complete and really Great UI/UX Design System that i think will make sense in this context which is Fluent Design System.

This is a very successful approach in front-end web frameworks like Angular and Developers use it extensively. as it makes development time much less, so that they can focus more on their business requirements. Examples are:

• Material Design by Google
• Component Dev Kit by Google
• Clarity Design by vmware
• Ant Design by NG-ZORRO team

I Know that this can be developed by the community, But a project like that backed by Microsoft will encourage too much developers to migrate to Blazor, just like google's approach in material design & Angular.

Describe the solution you'd like

Create an Open source, Enterprise ready, Native C#, Blazor UI components that work across web, mobile and desktop using .

Describe alternatives you've considered

• Telerik Blazor UI Components (Closed Source, Paid)

[mkArtakMSFT]

Thanks for contacting us, @yehia2amer.
We've moved this issue to the Backlog milestone. This means that it is not going to happen for the coming release. We will reassess the backlog following the current release and consider this item at that time. However, keep in mind that there are many other high priority features with which it will be competing for resources.

//cc @danroth27, @rynowak

[Mercurial]

hopefully, it will be considered as high as this is one of the selling points of a UI Library. actually, have beautiful components <3, whats best to fill that hole than Fluent Design!

[amrmoneem32]

I totally agree with @yehia2amer`s suggestions, it would help alot of developers and facilitate their job!!

[yehia2amer]

Thanks @mkArtakMSFT , Great to hear that there is an interest for this idea to be implemented.
Very Excited to see this in Blazor Roadmap soon. and hopefully in production with .Net 5 !

[bang88]

Another example https://github.com/bang88/ant-design-blazor

Ant-Design for Blazor (WIP)

[limefrogyank]

Hacking away at it myself, too:
https://github.com/limefrogyank/BlazorFabric

[ElderJames]

I have created the Ant Design Components for Blazor:
https://github.com/ElderJames/ant-design-blazor

[shqwerty]

Came accross this library which is a port of the Microsoft Fluent Design React Library to Blazor.

git repo description: "Simple port of FluenUI/Office Fabric React components and style to Blazor
https://github.com/BlazorFluentUI/BlazorFluentUI

[NPadrutt]

I found another Ant Design Component Library which looks very promising: https://github.com/Append-IT/ant-design-blazor

[lukechu10]

Why is fluent ui core still on the getting started page? There is no documentation whatsoever.

[jwatkin]

This video is about a new Microsoft project named FAST, which is relevant to this discussion. The FAST content begins at 13:50 and ends at 1:17:20.

[BrunoBlanes]

Holy crap, FAST is already shipped as release and works with a hole lot of frameworks, Blazor included, and it also has support for FluentUI out of the box. And here I was trying create Razor Components using JSInterop to work with FluentUI...

[lonix1]

Project page: https://www.fast.design/

[yehia2amer]

@jwatkin @BrunoBlanes @lonix1. Thanks for sharing this. I Just went through fast today and it is really good.
I like how universal it is, the way it is using web components, and how we as developers can integrate our own design systems to it. it seems like a perfect match for anyone using JS Frameworks. Specially if a developer is using multiple JS Front end Frameworks!

But what I initially suggested is a Native C#, Blazor UI components. where developers don't have to learn JS, and can only use C# to use, edit or even expand how those components works and behave and I cannot see how Fast is going to help in this area.
Please correct me if I am wrong.

I really hope that Microsoft use Fast as an architectural reference to design those components though but in C#

[BrunoBlanes]

You are not wrong, I would love to have that, but I consider FAST to be a workaround.

[LuohuaRain]

Can FAST work with Blazor ServerSide seamlessly?

[limefrogyank]

Can FAST work with Blazor ServerSide seamlessly?

I've experimented with FAST and Blazor. If you're using simple elements that have string-based attributes, they work perfectly with Blazor. However, you can't really make a List element using FAST and assign an array to it. At least, you can't do it easily. You'd either have to do work-arounds like set the array as a JSON string via attribute. Or you'd have to get a reference to the element and then once rendered, assign the array via javascript. This is pretty much the opposite of what you'd want to do in Blazor.

But for basic buttons and other basic elements, FAST is great!

[Mercurial]

Can FAST work with Blazor ServerSide seamlessly?

I've experimented with FAST and Blazor. If you're using simple elements that have string-based attributes, they work perfectly with Blazor. However, you can't really make a List element using FAST and assign an array to it. At least, you can't do it easily. You'd either have to do work-arounds like set the array as a JSON string via attribute. Or you'd have to get a reference to the element and then once rendered, assign the array via javascript. This is pretty much the opposite of what you'd want to do in Blazor.

But for basic buttons and other basic elements, FAST is great!

Fast components arent meant to be treated like html elements, they don't support C# datatypes only strings. You have to make a wrapper around or a higher level component if you want.

A FastBlazor component library if you will :)

[jwatkin]

At the FAST site, there's a "Community" tab where you can ask questions about FAST and Blazor as well as provide feedback. They want your feedback for which components they should implement next.

Check out this spot in the video to hear about their plans for components.

[criskrzysiu]

It would be great if css and js if any would be separated from actual Blazor components and could be reused for WebComponents etc.
Also maybe drop old browser and go full flag css variables, etc.