fluentui-blazor
fluentui-blazor copied to clipboard
microsoft
docs: add in-depth getting started or introduction
🙋 Documentation Request
As a developer who has been doing back-end work for the last 6 years I am completely out of the loop regarding modules, css, etc. What I want is to be able to adopt these controls and know enough to minimally style and bind data.
💁 Possible Solution
I believe the examples do a decent job at showing the controls and data-binding, but styling and setup requires me to understand more about web development than I currently do.
Can you share a bit more about what you would want from a styling perspective? For example, the components are based on a set of design tokens that allow you to manipulate a bunch of visual characteristics across the entire library. So, think of things like accent color, luminance (light and dark mode), shadow depth, corner radius, neutral palette, etc. One thing we could do is create a C# API that enables easily manipulating these tokens. Would that be useful to you or do you want full CSS control over the components themselves (quite possible today but you'd need to know how to use CSS Parts)?
I think adding an API for those stylization points would be ideal, yes! Essentially, I got the controls working and then wanted to turn on dark mode and change accent colors to start. I found aka.ms/themedesigner and plugged in all my desired values and grabbed the code only to realize it was Javascript or json and I had no idea what to do 😅.
I also found the deeper css styling here https://github.com/microsoft/fluentui/wiki/Component-Styling but again I don't know how any of that does or not translate to Blazor and what I would need to load via a Javascript helper.
Thanks!
Ah! Looks like you are looking at the React component docs, which don't apply to the web components. So, that's probably sending you off in the wrong direction. Here's some basic docs on how to use the tokens: https://docs.microsoft.com/en-us/fluent-ui/web-components/getting-started/styling Currently this requires JavaScript, but I think we want to explore whether there's a way we could also make this available as a C# API. /cc @vnbaaij
Also, take a look the design system provider element, which enables setting the basic tokens in HTML. https://github.com/microsoft/fast-blazor/blob/main/src/Microsoft.Fast.Components.FluentUI/Components/FluentDesignSystemProvider.razor I think we may be missing a demo of that actually. You can wrap this around your UI and set the tokens through the attributes. That will cause the token values to affect all components in the DOM hierarchy down stream from the provider element.
Great stuff!! I'll play with this some then, this is the kind of guidance I think others could benefit from as well, thanks again!
I’m on the same page. Need to see a couple of examples to learn how to use things like design tokens.
Yeah, learned a lot from this open issue. I think it will be great if there are more code examples and blazor fast fluent API.
Thanks everyone for the feedback! I think we can put some notes on this in the readme and then also expand out the above linked docs with more information on using the design system provider. In parallel we can explore whether a richer C# API is possible for more advanced scenarios. Thanks for your patience!
I would wish there were more accessible samples and perhaps some templates to get started with. A base layout with navigation.
MudBlazor does a lot better with its documentation.
I do realize that the point of Fluent probably isn't to give you everything. It is up to the platform.
But for the Web we need some more stuff, some layouts and panels - with examples. To create nav menus and such.
It seems like the only thing you are encouraged to use this for is when integrating with Microsoft products that already provide their own shells.
Thanks for the feedback @robertsundstrom We have been having some talks with the .NET and VS teams about how we could do some things like that. Everything you have described is something we would like to do, but unfortunately I can't make any commitments just yet.
Setting examples, layouts, and templates aside, are there any specific components that you would like to see? If you can create issues for individual components, that's something we can also add to our backlog.
@EisenbergEffect
A proper doumentation site with code samples, similar to MudBlazor.
A ”getting started” with responsive layouts to copy. A shell, if you will, with a navbar.
Like:
- Dashboard
- Data view
- A form of some kind
These seem to be the most common scenarios. Just copy, paste, and modify.
I have really been looking for some guidance in building a responsive shell for my apps.
And of course, some more components for displaying data.
For business-line-application a proper data grid is almost always essential. A good one will allow user to resize columns, include details view, sorting, filtering, virtualization, in line editing, custom cell template binding etc. That is really complex control to do or rather composition of many different controls. Probably why 3rd party companies charge big monies for them, but nonetheless really important one.
From less complicated controls I can think of would be great to have out of the box:
- Icon button (maybe collab with fluentui-system-icons?)
- Toggle button (not switch)
- Multiselect
- Toast
- Calendar
- Popup (as opposed to the dialog popup can be dismissed by clicking anyway outside of popup's bounds)
- Password input
As of panels and layouting - for me, a WPF dev, Grid, StackPanel, DockPanel and Border covers 99% scenarios, no such thingies available for the web. I think there is no good alternative but to learn CSS I'm afraid.
Basic components are great to have. Dialogs, Modals, Pickers, Table with pagination.
What you would expect in a business grade app. The rest could be plugins.
As I mentioned, some layout to copy and modify. Basic shell with navigation.
@BieleckiLtd Grid systems can be defined as simple CSS classes on top of flex, like Bootstrap and even MudBlazor have done. Also margins and paddings. Responsiveness, of course.
When it comes to the Blazor part, there should be a DialogService out of box. Etc.
I've added some very basic documentation on using the design system provider to set tokens here: https://github.com/microsoft/fast-blazor/blob/main/README.md#configuring-the-design-system I'm working with other members of my team to get a list of typical token settings for various common products, e.g. Teams, Office, etc. so setting this up is easy for folks integrating into those contexts.
I'm going to leave this issue open so I can come back and process the individual feature requests here into various issues and open up discussion. Some things listed above are already in process (Calendar, Multiselect). Others will need further discussion. Layout is a topic on its own that we've only recently started discussion on.
Look at the docs at https://www.blazorfluentui.net this is the way most UI libs docs are and web developers are used to such. We love to copy, paste and modify.
So far, unless you are coming from react it is impossible to use this library properly. There is no sample on the layouts, responsive design, and themes.
I love the fact that some contributors from that project are here. Maybe we will see proper samples in the future. With Maui Blazor coming soon this library could be a game changer. For that to happen the docs/samples have to be similar to bootstraps.
Thank you for the feedback @Serge-N. We hear you loud and clear. I know it may not look like things are happening from the outside sometimes. Please trust me in that folks like me are "going to bat" and advocating very hard for your needs internally.
Hi,
We've been hard at work on documentation and examples and already provided a major update to this with the 1.6 release of the library. Now, with version 2.0 (RC1 available now) we are taking this even further. The demo and documentation are available at https://aka.ms/fluentui-blazor.
A blog describing the latest changes can be found at https://baaijte.net/blog/microsoft-fast-components-fluentui-2.0/
