Exploring the Fluent UI Blazor components

in this new episode of open at Microsoft we have vinit again talking about Flint Y and Blazer but right now we're going to see some codes some demos and learn how can you contribute stay tuned Vincent welcome back to open at Microsoft feeling good today yeah great to be here again oh that's exciting so right now I want to know more about fluent we talked a little bit about already on the past episodes how can what motivated and what is fluent why but I want to know more about it I want to know a demo I want to see something do you have anything for us today yeah yeah yeah so exactly yeah so in the previous episode we just went into like the history and the details of of how it became a library but now today we want to get more handson so let's uh start up visual studio and uh yeah just do a file new project because as I explained in the in the last one um we have basically uh buil all the templates for Blazer in the fluent uh uh Library as well so if you go to create a new project in in Visual Studio you will find in your project list like these two uh possible project items that you can start with so let's just create a uh fluent UI Blazer web app well name location Etc of course doesn't matter for this one uh and then uh you get to the configuration and this would look familiar if you're doing uh already use these standard BL templates so uh you can just use the do net8 framework of course we could go with or without the individual authentication uh and we can get like a server mode uh for each of those of those pages or do that on a global level and of course we can also include the the sample pages so maybe it's interesting to also uh set up those individual accounts uh then we just do create just like you do with the normal Library uh project load and while it's loading oh it goes to a different screen I do like your wallpaper though really nice that that that's for the net or 8om uh uh that we got that from so yeah basically you just have like the the regular uh pages and and site that you have with the the regular uh standard template so everything is there uh but then with a Blazer look and feel um so um basically we don't have to do anything else we can just press F5 or start and uh start uh uh debugging the site or start exploring site and what you get will look very familiar uh from a um content perspective so it has all the same pages that you are used to with the to get with the Blazer template uh but now it all looks like uh more of a fluent side and it is starting up I really enjoy how you say that fluent has a few right sorry uh you're saying like fluent has a few like you have something that it's you see oh that's fluent your directly yeah yeah yeah yeah it's it's very um particular and um well it it might not be for every say like site that you're going to put out there it may be more for line of business applications uh where you want to have like a uh yeah that that look and feel of a of a more business-like application so uh probably for a fancy gaming site or your personal blog uh you would not be using this this kind of design uh but for yeah like say business applications this is this is very much uh um capable of doing that so um yeah you like I said you have all the regular pages that you get from the regular template as well uh so you have the counter here it's all works of course uh you have the weather page um and you can immediately see that it's uh not using that standard HTML template and table that you get but in this case it's using our uh fluent data grid component so you immediately get capabilities like sorting in there Etc uh and also all the authorization pages have been ported over to fluent look and feel um so all those screens that you get to register an account Etc are all using this uh oops sorry uh they are all using that fluent look and feel as well so it's a complete representation of of the template uh but yeah with the the Blazer look and view uh and you get that with a with a click of a button any specifics you would like to know on the on the code side of this template how it looks for example if you ask me I want to know everything but we don't have time to see everything uh because I really like to know about the form because I really like that you could like like change it easily on on that but we know we have a lot of things to talk about fluent I want to know from you what do you think is more interesting on this code on the demo um what do you mean exactly uh why don't think it's more interesting to see on this demo the code well I think uh looking at how you can basically uh Place those fluent components inside your Blazer application is is interesting so what we've done is we kind of prefixed every component that we have with the with the fluent name so that that makes it easy to find them uh and if you would like to uh yeah go ahead and and enter other components you just start typing with the fluent and you get the whole list of components in uh inside of the the intellisense uh drop down of course so that makes it easier to find stuff um but it's still quite complex because there's a lot of components there's a lot of parameters for all those components uh so you'll definitely need uh to draw to to go back to the to the documentation side I guess um we do have quite an extensive set of XML documentation and uh we're also of course um making that available throughout uh uh your coding uh exercises but yeah the uh the the the website will be indispensable for getting those that extra information um not just to find what kind of parameters there are but specifically on I think all the examples that are in there and uh I'll switch over to that one right now so we already saw this one uh on the previous episode but we'll can take a little bit of a closer look now and basically uh if you uh break it down we have like a couple of areas in this this side so this getting started area is more or less like uh yeah how do you get started how do you set it up uh what kind of services do you have that you can use for displaying dialogues or tool tips or whatever um then we have like a whole set of components that are uh not really uh exposing a lot of fluent design but they help you to build out uh layouts that use that fluent design and uh make it easier to go build a site with it so there's like that bar with the blue color and the the text in a specific size and format uh well to get that in your site you just use our header component uh Etc uh so these are all kinds of uh um components that we have available for that and with each component uh you can also see uh examples of how they can be used within your own site uh so here we have for example uh splitter component that you can use in a horizontal or vertical way um so we try to expose all those parameters in actual examples that you can use uh and also make it easy to download the code for such an example so you each example has here it this download button which gives you the razor file that you can use or if you just want to take a closer look at the code you can go to this razor Tab and find all the uh the information in there with of course also a copy button that makes it easy to get that code into your own application so uh yeah that I think that just makes it a lot easier to get started and uh get you going um in most of the cases of course this won't fit your exact needs but yeah at least it gets you started and going uh in a way that that that's easier excellent uh by the way do you have any GitHub that you can show us to he says I want to contribute to this you know this incredible uh this incredible library and do more things I that yeah of course so it's all open source uh we love contributions uh we would definitely like to get more contributors uh uh on board it so uh we have a whole Community uh of course there's the the GitHub repo that I'll show in a second but we also have like gter and Discord channels that we can use to have more like onetoone Communications um uh but yeah the the the repo is here it's at github.com Microsoft fl- Blazer and that's where all the magic happens so we have like uh um yeah a lot of contributors already but we want to have more we want to have discussions here uh we would like you to raise issues if you're running into problem uh maybe even answer a couple of questions or or answer a couple of uh uh post a couple of solutions to issues that are out there but uh yeah uh we really love to have you on board and and help us build out this uh this this library to even uh better levels mhm I know you have as well server versions U web assembly versions right yeah exactly yeah and and the demo site that we saw earlier uh on the other tab is actually also part of the repository so here in this demo folder you have like the the client version of that demo site but there's also a server version of that demo and they both grab back into this this shared folder that basically contains all the sample pages and components that we use in those demo environment so if you clone the repository uh you can run those uh those demo sites from your own local environment and choose to go either with the client web assembly version or with the server version this looks incredible folks if you want to know more and want to go to the repo or the website um see on the description I have all the links for you and socials stay tuned for more open FI I'm Pabo Lopez that was Rec with FL and Blazer demo see you soon

Channel: Microsoft Developer

Views: 6,550

Keywords: Azure, Microsoft, Tech, Technology, Dev, Development, Cloud Computing

Id: jOv9ioCVDFU

Length: 11min 7sec (667 seconds)

Published: Tue Feb 13 2024