Simple port of Fluent UI (formerly Office Fabric) React components and style to Blazor
https://www.blazorfluentui.net/
https://blazorfluentui.azurewebsites.net/
https://github.com/BlazorFluentUI/BlazorFluentUI/wiki
| Control | State | Information |
|---|---|---|
| Button | ||
| Checkbox | except for icons | |
| ChoiceGroup | ||
| ComboBox | ||
| Dropdown | ||
| Label | ||
| Link | ||
| Rating | ||
| SearchBox | ||
| Slider | ||
| SpinButton | ||
| TextField | except masking | |
| Toggle |
| Control | State | Information |
|---|---|---|
| Calendar | ||
| ColorPicker | ||
| DatePicker | ||
| PeoplePicker | ||
| Pickers | ||
| SwatchColorPicker |
| Control | State | Information |
|---|---|---|
| ActivityItem | ||
| DetailsList | ||
| DocumentCard | ||
| Facepile | ||
| GroupedList | ||
| HoverCard | ||
| List | supports INotifyCollectionChanged |
|
| Persona |
| Control | State | Information |
|---|---|---|
| Breadcrumb | ||
| CommandBar | ||
| ContextualMenu | ||
| Nav | ||
| OverflowSet | ||
| Pivot |
| Control | State | Information |
|---|---|---|
| Coachmark | ||
| MessageBar | ||
| TeachingBubble |
| Control | State | Information |
|---|---|---|
| ProgressIndicator | ||
| Shimmer | ||
| Spinner |
| Control | State | Information |
|---|---|---|
| Callout | ||
| Dialog | can't drag | |
| Modal | no modeless version | |
| Panel | ||
| ScrollablePane | ||
| Tooltip | limited functionality. will show, but can't interact with it yet, doesn't respond to overflow yet. |
| Control | State | Information |
|---|---|---|
| Announced | ||
| FocusTrapZone | ||
| FocusZone | ||
| Icon | only MS icons | |
| Image | ||
| Keytips | ||
| Layer | only layers at root window right now. | |
| MarqueeSelection | ||
| Overlay | ||
| ResizeGroup | ||
| Selection | ||
| Separator | ||
| Stack | ||
| Text | ||
| Themes |
| Control | State | Information |
|---|---|---|
| ResponsiveLayout | ||
| RichTextEditor | Works with limited styles available | |
| GlobalCS | ||
| LocalCS |
There are no MergeStyles in this port. It's just each control packaged into its own project so you can limit what gets added to your Blazor project.
- Install NuGet package for the control you want. BlazorFluentUI.*
(There is also a package that will install all packages at once: BlazorFluentUI.AllComponents - Add the javascript to your index.html or index.cshtml file:
<script src="_content/BlazorFluentUI.BFUBaseComponent/blazorFluentUi.min.js"></script>
- Optionally, add Microsoft's assets package to your index.html or _Hosts.cshtml file.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" />
OR
Use the tool here to generate your own MS font package: https://uifabricicons.azurewebsites.net/
(Remember that the assets package has a more restrictive license. You are required to use it with/for some type of Microsoft product. However, one of their engineers said that using it hosted on Azure would be enough... but I'm not a lawyer, so use caution.)
- Add "AddBlazorFluentUI" to ServiceProvider
ServerSide: Startup.cs
public void ConfigureServices(IServiceCollection services)
{
...;
services.AddBlazorFluentUI();
...;
}
ClientSide from version 'Blazor WebAssembly 3.2.0' : Program.cs
public static async Task Main(string[] args)
{
...;
builder.Services.AddBlazorFluentUI();
...;
}
- Add css-class tag in
ServerSide: Pages/_Host.cshtml
<head>
...;
<component type="typeof(GlobalRules)" render-mode="ServerPrerendered" />
...;
</head>
ClientSide: wwwroot/index.html
<head>
...;
<style id="staticcs"></style>
...;
</head>
You may need to add an @using BlazorFluentUI to the top of your _Hosts.cshmtl to avoid a 'GlobalRules could not be found` error.
- Add following to get controll over css-classes tag you created before
ServerSide: issn't needed
ClientSide from version 'Blazor WebAssembly 3.2.0' : Program.cs
public static async Task Main(string[] args)
{
...;
builder.RootComponents.Add<BFUGlobalRules>("#staticcs");
...;
}
- For Theme's add following in
App.razoras most outside Component. You can have a look in Demo application'sApp.razor
<BFUTheme>
<...>
<Router AppAssembly="typeof(Startup).Assembly" />
</...>
</BFUTheme>
- If you're using any component that requires a
Layeras part of its inner-workings (i.e.BFUModal,BFUCallout,BFUTooltip, etc... anything that pops up over already drawn stuff), you need to wrap theRouterwith aLayerHost.
<BFULayerHost Style="display:flex; flex-direction: row;width:100vw">
<Router AppAssembly="typeof(Startup).Assembly" />
</BFULayerHost>